40. 美化表单元素 {ignore}

[toc]

1. 新的伪类

:focus

元素聚焦时的样式。

示例：

<p>
    <a tabindex="2" href="https://www.baidu.com">lorem</a>
</p>
<p>
    <input tabindex="1" type="text">
</p>
<p>
    <button tabindex="3">提交</button>
</p>

tabindex，用于控制tab键，切换的元素顺序。

input {
    color: #999;
}

input:focus {
    outline: 1px solid #008c8c;
    outline-offset: 0;
    color: #000;
}

outline-offset: 0; 用于设置外边框的偏移量（如果 outline 是 auto 即：outline: 1px auto #008c8c; 那么该值无效）。

• color: #000; 用于设置聚焦状态下输入的字体的颜色。
• color: #999; 用于设置失去焦点状态下的字体的颜色。

当聚焦的时候，会应用上面设置的样式。

outline 和 border 之间的区别：前者不占据盒模型的尺寸，后者是盒模型的组成部分。

:checked

:checked 用于设置单选或多选框被选中的样式。

示例：

<p>
    <input id="radmale" name="gender" type="radio">
    <label for="radmale">男</label>
    <input id="radfemale" name="gender" type="radio">
    <label for="radfemale">女</label>
</p>

input:checked+label {
    color: red;
}

input:checked+label 该选择器的含义是：如果某个 input 处于被选中状态，那么选中该 input 元素后面的兄弟元素 label。

2. 常见用法

重置表单元素样式

由于浏览器默认样式表 user agent stylesheet 中，给表单设置了一些默认样式，如果不想使用这些默认样式，我们通常会重置一些表单的样式：

示例：

重置样式

input,
textarea,
button,
select {
    border: none;
}

input:focus,
textarea:focus,
button:focus,
select:focus {
    outline: none;
    outline-offset: 0;
}

浏览器样式表中，给这些元素设置了 outline 和 border；其中，outline 在聚焦时会显示，border 在未聚焦状态会显示；这些都是浏览器样式表帮我们定义好的，我们可以先将这些样式重置后，再重新设置样式。

input[type="text"],
textarea,
select {
    border: 1px solid #999;
}

input[type="text"]:focus,
textarea:focus,
select:focus {
    border: 1px solid #008c8c;
}

button {
    border: 2px solid #008c8c;
    border-radius: 5px;
}

新设置的表单样式具体是什么样的，还得根据设计稿的要求来定，该示例所设置的新的样式是随便写的。

设置textarea是否允许调整尺寸

resize mdn

resize是一个css属性，它有下面这4个取值：

• both：默认值，两个方向都可以调整尺寸
• none：不能调整尺寸
• horizontal: 水平方向可以调整尺寸
• vertical：垂直方向可以调整尺寸

文本框边缘到内容的距离

可以通过给文本框设置下面的css属性来实现

• padding

  • 可以设置4个方向

• text-indent

  • 只可以设置左侧边缘与内容之间的距离

这两种方式都可以实现效果。

控制单选和多选的样式

示例：自己写一个“单选框”，效果如下：

<div>
    <div class="radio"></div> 未选中效果
</div>
<div>
    <div class="radio checked"></div> 选中效果
</div>

.radio {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #999;
    border-radius: 50%;
    cursor: pointer;
}
.radio.checked {
    border-color: #008c8c;
}
.radio.checked::after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    background: #008c8c;
    margin-left: 3.5px;
    margin-top: 3.5px;
    border-radius: 50%;
}

示例：实现一个切换选中效果。

demos 9. 美化的单选框

PS：label 元素与单选框之间如果采用的是显示关联，想要实现同样的效果，单独通过css，好像很难实现。但是，如果使用隐式关联，实现起来就会容易一些。