透明、表单

一.透明:

1.可以让图片和文字以及背景都变透明,

Opacity:0~1

应用:轮播图的箭头

Ie9浏览器:filter:alpha(opacity=value):取值范围0~100之间的整数值

Rgba(255,255,0,0.5)最后一位表示透明值(取值范围为0~1)只支持ie8以上的

兼容其他浏览器:opacity:0.1~1

二.表单:

1.Input:

outline:none 清除获取焦点之后外面的边框

input:focus 获取焦点后input的变化

2.textarea:

resize:none不可以随意拖动了

3.操作下拉表单:

Appearance:none清除下拉列表或者单选框自带的样式

Padding-right:值

Bcckground:

Background-image:url()

Background-repeat:()

4.Css属性

::after{

Content:添加的内容

Input :checked 单选框或复选框选中后

Input:checked::after{}

总结:

一.Css操作表单元素

  1. 1.      input正常情况下input获取焦点之后的边框为2px 黑色【outline:none 清除获取焦点之后的外边框】 【:focus获取焦点之后的操作样式】
  2. 2.      下拉菜单 改变后面的小箭头的样式[appearance:none 清除自带的样式 用背景代替小箭头]
  3. 3.      文本域 resize:none[默认情况下在浏览器中文本域可以改变大小]
  4. 4.      单选框和复选框 ::after:在元素里面的后面添加内容 :checked选中后添加样式
  5. 5.      Label提示信息标签将提示信息及相应的表单控件进行关联

<label for=“跳转链接”></label>

<input type=”text” id=””/>

  1. 6.      <fieldset></dieldset>对表单中的元素进行分组
  2. 7.      <Legend></legend>在绘制的方框中内插入一个标题。Legend必须是fieldset内的第一个元素

二.表单

邮件:<input type=”email”>

网址:<input type=”url”>

数字:<input type=”number”>

进度条:<input type=”range”>

年月日:<input type=”date”>

Week:<input type=”week”>

月份:<input type=”month”>

时间<input type=”time”>

本地时间:<input type=”datetime-local”>

颜色:<Input type=”color”>

搜索 局部清空的作用:<input type=”search”>

移动端会用:<input type=”tel”>

 

posted @ 2021-11-20 21:25  满天星可以嘛  阅读(26)  评论(0编辑  收藏  举报