告别千篇一律：用 appearance 和伪元素打造你的专属表单控件
话说，你有没有觉得网页上的表单控件，特别是那几个老熟人：<select>、<input type="checkbox">、<input type="radio">，长得实在太…嗯…太“官方”了？
就像一群穿着统一制服的士兵，整齐划一，却少了点个性。设计师们绞尽脑汁，想让网页更具特色，结果往往被这些“制服控”表单控件拖了后腿。
别担心，今天我们就来聊聊如何打破这种沉闷，让你的表单控件也穿上“高定”，拥有独一无二的风格。而我们的秘密武器，就是 CSS 的 appearance 属性，以及一对好搭档：伪元素 ::before 和 ::after。
appearance：卸下“制服”，回归自由
appearance 属性，简单来说，就是告诉浏览器：“嘿，别用你默认的样式渲染这个表单控件了，让我来！” 它就像一个隐形的“卸妆液”，能把浏览器给表单控件画的“官方妆容”卸掉，让它们露出原本的“素颜”。
常用的值有：
none: 卸得干干净净，什么默认样式都不要了。auto: 恢复默认样式，相当于什么都没做。
等等，你可能会问：“卸妆了？那岂不是一片空白？我想要的是变漂亮，不是变透明啊！”
别急，这才是精彩的开始。卸妆只是第一步，接下来，我们就要用伪元素和 CSS 来给它们化上更精致、更符合你心意的妆容。
伪元素 ::before 和 ::after：造物主的画笔
伪元素，顾名思义，它们并不是真正的 HTML 元素，而是 CSS 创造出来的“幽灵元素”。它们存在于元素的内部，可以像真实的元素一样设置样式，但又不会影响 HTML 结构。
::before 在元素内容之前插入一个虚拟元素，::after 则在元素内容之后插入。它们就像是设计师手中的画笔，可以绘制各种各样的图案、形状，为元素增添细节和装饰。
实战演练：让 Checkbox 告别单调
让我们从最常见的复选框（<input type="checkbox">）开始，一步步打造一个充满个性的复选框。
第一步：卸妆
首先，我们要把复选框的默认样式卸掉。
input[type="checkbox"] {
appearance: none; /* 卸妆 */
width: 20px;
height: 20px;
border: 2px solid #ccc; /* 加上边框，让它可见 */
border-radius: 4px; /* 圆角，增加美观度 */
cursor: pointer; /* 鼠标悬停时显示手型 */
}这段代码的作用是：
appearance: none;告诉浏览器不要使用默认的复选框样式。width和height设置复选框的大小。border添加边框，让复选框显示出来。border-radius让边框变得圆润。cursor: pointer;当鼠标悬停在复选框上时，显示手型，提示用户可以点击。
这时候，你会发现原来的复选框已经消失了，取而代之的是一个朴素的方框。
第二步：化妆
接下来，我们要用伪元素来给复选框“化妆”。当复选框被选中时，我们希望在方框内显示一个对勾。
input[type="checkbox"]:checked::before {
content: "2713"; /* Unicode 字符，表示对勾 */
display: block; /* 让伪元素显示出来 */
width: 100%;
height: 100%;
font-size: 16px;
text-align: center;
color: green;
}这段代码的作用是：
input[type="checkbox"]:checked::before选中状态下的复选框的::before伪元素。content: "2713";设置伪元素的内容为一个 Unicode 字符，表示对勾。你可以根据自己的喜好选择其他的 Unicode 字符，或者使用图片。display: block;让伪元素显示出来。默认情况下，伪元素是行内元素，需要设置为块级元素才能设置宽度和高度。width和height设置伪元素的大小，使其充满整个复选框。font-size设置对勾的大小。text-align: center;让对勾居中显示。color设置对勾的颜色。
现在，当你点击复选框时，就会在方框内显示一个绿色的对勾。是不是比默认的复选框好看多了？
第三步：锦上添花
我们还可以添加一些过渡效果，让复选框的状态切换更加平滑。
input[type="checkbox"] {
transition: border-color 0.2s ease-in-out; /* 边框颜色过渡 */
}
input[type="checkbox"]:checked::before {
transition: all 0.2s ease-in-out; /* 对勾显示过渡 */
}
input[type="checkbox"]:focus {
outline: none; /* 去掉默认的 focus 样式 */
border-color: blue; /* focus 时边框颜色变为蓝色 */
}这段代码的作用是：
transition添加过渡效果，让边框颜色和对勾的显示更加平滑。outline: none;去掉默认的 focus 样式。border-color: blue;当复选框获得焦点时，边框颜色变为蓝色，提示用户当前选中的是这个复选框。
通过以上三步，我们就成功地打造了一个个性化的复选框。你可以根据自己的喜好，调整颜色、形状、动画效果，让你的复选框与众不同。
举一反三：Radio Button 也来换个装
掌握了复选框的改造方法，单选按钮（<input type="radio">）的改造就轻而易举了。
与复选框类似，我们首先要卸掉单选按钮的默认样式，然后用伪元素来绘制新的样式。
input[type="radio"] {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 50%; /* 圆形 */
cursor: pointer;
}
input[type="radio"]:checked::before {
content: "";
display: block;
width: 60%;
height: 60%;
margin: 20% auto; /* 居中显示 */
background-color: green;
border-radius: 50%;
}
input[type="radio"] {
transition: border-color 0.2s ease-in-out;
}
input[type="radio"]:checked::before {
transition: all 0.2s ease-in-out;
}
input[type="radio"]:focus {
outline: none;
border-color: blue;
}这段代码与复选框的改造代码非常相似，主要区别在于：
border-radius: 50%;让单选按钮的边框变成圆形。input[type="radio"]:checked::before选中状态下的单选按钮的::before伪元素，我们绘制一个更小的圆形，作为选中标记。margin: 20% auto;让小圆形在单选按钮内居中显示。
进阶技巧：select 下拉框的华丽变身
select 下拉框的改造稍微复杂一些，因为浏览器对 select 元素的样式控制比较严格。但是，我们仍然可以通过一些技巧来实现自定义样式。
方案一：隐藏原生 select，用 div 模拟
这种方案的思路是：隐藏原生的 select 元素，然后用 div 元素和 JavaScript 来模拟下拉框的 behavior。
这种方案的优点是：可以完全自定义下拉框的样式，不受浏览器的限制。
缺点是：实现起来比较复杂，需要编写大量的 JavaScript 代码。
方案二：利用 appearance 和伪元素，有限度地自定义
这种方案的思路是：利用 appearance 属性卸掉 select 元素的默认样式，然后用伪元素来添加一些简单的样式，例如：修改下拉箭头的样式、修改选项的颜色等。
这种方案的优点是：实现起来比较简单，不需要编写大量的 JavaScript 代码。
缺点是：自定义程度有限，不能完全改变下拉框的样式。
这里我们介绍第二种方案，因为它更简单易用。
select {
appearance: none;
width: 200px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
cursor: pointer;
/* 关键代码：修改下拉箭头 */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px;
}
select:focus {
outline: none;
border-color: blue;
}这段代码的作用是：
appearance: none;卸掉select元素的默认样式。width、padding、border、border-radius、background-color设置select元素的样式。background-image设置select元素的背景图片，用来显示下拉箭头。这里我们使用了一个 SVG 图片，你可以根据自己的喜好选择其他的图片。background-repeat、background-position、background-size设置背景图片的显示方式。
通过修改 background-image，我们可以轻松地改变下拉箭头的样式。
注意事项：兼容性问题
appearance 属性在不同浏览器中的兼容性可能存在差异。在使用 appearance 属性时，最好进行兼容性测试，确保在主流浏览器中都能正常显示。
总结：释放你的创意，让表单控件焕发新生
appearance 属性和伪元素是强大的 CSS 工具，它们可以帮助我们打破表单控件的“制服化”外观，打造独一无二的风格。
通过本文的讲解和示例，相信你已经掌握了自定义表单控件样式的基本技巧。现在，就释放你的创意，让你的表单控件焕发新生吧！
记住，网页设计不仅仅是技术的堆砌，更是艺术的表达。大胆尝试，勇于创新，让你的网页充满个性和魅力！