关于表单样式
【注意】:以下样式只在Chrome浏览器下设置成功,其它浏览器可能有所差异,需要单独设置、自行调整
一、文本框样式
-
正常情况下,普通文本框的样式如下(未聚焦和聚焦状态)
-
首先,文本框的样式大部分都可以通过我们已知的CSS属性进行修改
input[type=text] { /* 通过width/height设置宽高 */ width: 100px; height: 30px; /* 设置字体样式 */ font-size: 18px; font-weight: bold; /* 设置内边距 */ padding: 0 5px; }
-
然后,最重要的应该是边框样式的设置,也是我们非常熟悉的border属性
PS:以下样式的设置是在上面样式设置的基础上进行的
input[type=text] { /* 通过border设置边框样式 */ border:5px solid red; border-radius: 8px; }
【注意】:如果不设置边框样式,就会出现下面图片中第一种情况,即左上部分的颜色要暗一点
-
其次,当聚焦时,文本框周围会有一圈轮廓,我们可以通过outline属性来控制
input[type=text] { /* 通过outline设置轮廓 */ outline-style: dashed; outline-offset: 5px; outline-color: dodgerblue; outline-width: 5px; /* outline: none; */ }
解析:
outline-offset
:即轮廓对文本框的偏移量,可以为负数,负数即显示在文本框内部outline-color
:轮廓颜色outline-width
:轮廓宽度outline-style
:轮廓样式【注意】:如果设置了轮廓样式,则轮廓会常显;不设置样式,则默认在聚焦时才显示,默认样式为直线,轮廓无法圆角
一般情况,设置
outline:none
即可 (隐藏轮廓) -
接下来,通过:focus伪类,来控制文本框聚焦时的样式
input[type=text]:focus { /* 聚焦时样式 */ box-shadow: 0px 0px 12px -1px #b1c1c3; }
添加聚焦时的样式,如阴影,轮廓样式等等
-
还可以通过:placeholder伪类来控制提示信息的样式
input[type=text]::placeholder { /* 提示信息样式 */ font-size: 14px; color: rgba(136, 127, 127, 0.774); }
二、选框样式
结合
<label>
标签,为绑定的选框设置样式
-
前提条件:
-
实现思路:
- 隐藏选框,再为
<label>
标签添加::before伪类或者::after伪类 - 通过这个伪类设置新的样式
- 结合选框的:checked伪类属性,设置选中状态时的样式
- 隐藏选框,再为
-
实现过程:(以单选框为例)
-
隐藏单选框
input[type="radio"] { /* 直接设置大小为0 */ width: 0; height: 0; }
-
添加伪类
label::before { content: ""; display: inline-block; /* 用vertical-align来对齐文本 */ vertical-align: middle; width: 20px; height: 20px; margin-right: 10px; border-radius: 50%; border: 5px solid darkgreen; }
-
-
选中状态
input[type="radio"]:checked+label::before { background-color: lightgreen; padding: 0px; }
-
或者直接给
<label>
标签设置样式,再结合:checked伪类属性,设置选中样式
三、按钮样式
-
先设置基本样式,用常用的属性就可以设置
input[type=button], input[type=submit], input[type=reset] { width: 80px; height: 30px; color: white; background-color: #5bb85d; font-size: 18px; font-weight: bold; }
-
主要是边框样式,和文本框样式的边框设置一样,使用border属性,更改默认的边框样式,使用outline属性,更改默认轮廓样式
input[type=button], input[type=submit], input[type=reset] { /* border+outline */ border-radius: 3px; border: none; outline: none; }
其它的还可以通过伪类属性,设置点击时的样式:active,聚焦时的样式:focus,等等
四、下拉框样式
-
基本样式还是可以用已知的属性来设置,对于边框仍然采用border+outline属性来设置
select { width: 150px; height: 30px; color: #444; font-size: 16px; font-weight: bold; /* border+outline */ border-radius: 3px; border: 3px solid skyblue; outline: none; }
-
通过text-align-last属性,来控制下拉框里的文字居中,通过appearance属性,隐藏下拉箭头
select { /* 文字间距 */ letter-spacing: 2px; /* 文字居中 */ text-align-last: center; appearance: none; /* 背景颜色 */ background-color: #fff; background: linear-gradient(white, #e5e5e5); }
-
对于option元素,只能设置一般的字体文本样式
option { font-size: 14px; font-weight: bold; color: red; background-color: #adff2f; }
只有字体文本样式才会生效
无法设置位置样式、悬浮样式
背景颜色无法透明,透明时默认白色
因此,要更改option的样式,只能通过其它元素模拟来实现下拉框
-
其它的,在行内设置样式size属性和multiple属性
<select size=2>...</select>
表示显示两个选项出来
这时下拉框里的内容被option里的内容填充,显示数量为两个选项,且此时通过滚动来切换显示
select{ /* 取消高度 */ /* height:30px */ /* 文本垂直方向居中对齐 */ vertical-align: middle; }
<select multiple>...</select>
可以搭配size属性,设置具体的显示数量
鄙人拙见,不足之处,万望海涵!