透明、表单
一.透明:
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. input正常情况下input获取焦点之后的边框为2px 黑色【outline:none 清除获取焦点之后的外边框】 【:focus获取焦点之后的操作样式】
- 2. 下拉菜单 改变后面的小箭头的样式[appearance:none 清除自带的样式 用背景代替小箭头]
- 3. 文本域 resize:none[默认情况下在浏览器中文本域可以改变大小]
- 4. 单选框和复选框 ::after:在元素里面的后面添加内容 :checked选中后添加样式
- 5. Label提示信息标签将提示信息及相应的表单控件进行关联
<label for=“跳转链接”></label>
<input type=”text” id=””/>
- 6. <fieldset></dieldset>对表单中的元素进行分组
- 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”>