你知道如何修改单选框、复选框、下拉框的默认样式吗-烟雨网

theme: nico

介绍

HTML 原生的单选框、复选框元素样式在各个浏览器上面由用户代理默认设置样式，如果在页面上应用了其他颜色或主题时，我们通常也相应的更改这些输入框或按钮的颜色或背景，否则会出现颜色与背景或主题不融入的样式不一致问题。

appearance

通常的做法是使用 display: none、绝对定位或隐藏它们，然后使用 :before 或 :after 伪元素实现样式。

从 Chrome 83 开始支持的 appearance CSS 属性提供了更有效的用于控制基于操作系统主题的 UI 控件的原生外观的方法。目前，除了 IE，其他浏览器都已支持，兼容性很好。

单选框

<body>
  <label>
    <input type="radio" name="contact" value="email" checked>Email
  </label>
  <label>
    <input type="radio" name="contact" value="phone">Phone
  </label>
  <label>
    <input type="radio" name="contact" value="mail">Mail
  </label>
</body>
<style>
  input[type=radio] {
    appearance: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    border: 2px solid #999;
    transition: 0.2s all linear;
    margin-right: 5px;
    vertical-align: top;
  }
  input[type=radio]:checked {
    border: 6px solid black;
  }
</style>

代码片段

复选框

<body>
  <label class="label">
    <input type="checkbox">
    <i class="check"></i>
    <span>Apple</span>
  </label>
  <label class="label">
    <input type="checkbox">
    <i class="check"></i>
    <span>Banana</span>
  </label>
  <label class="label">
    <input type="checkbox">
    <i class="check"></i>
    <span>Pear</span>
  </label>
</body>
<style>
  .label {
    display: inline-flex;
    align-items: center;
    margin: 1em .5em;
  }
  .label input[type=checkbox] {
    appearance: none;
  }
  .label input[type=checkbox]+.check {
    width: .5em;
    height: .5em;
    margin-right: .5em;
    border: solid black;
    transition: .2s;
  }
  .label input[type=checkbox]:checked+.check {
    height: .2em;
    border-top: transparent;
    border-right: transparent;
    transform: rotate(-45deg);
  }
</style>

代码片段

下拉框

<select> 元素的内部结构复杂，难以控制，所以很难用 CSS 进行高效的设计，但可以像其他元素一样改变某些方面——例如，调整盒模型、显示的字体等，还可以使用 appearance 属性来去除默认的系统外观。如果要实现自定义 <select> 元素，可以考虑使用第三方 UI 库，或者尝试使用非语义元素和 JavaScript 来制作下拉菜单，再使用 WAI-ARIA 来提供语义。

代码片段