自定义元素样式：改写单选框、复选框、下拉框的默认样式

2022-12-13 13:41:08

征服表单控件：如何改写单选框、复选框和下拉框的默认样式

在构建交互式的网页时，表单控件是不可或缺的元素。它们允许用户提供输入，从而与网页进行互动。然而，这些控件的默认样式往往有些单调，与网页的整体设计格格不入。幸运的是，我们可以通过一些技巧来解决这个问题，让表单控件与我们的网页完美契合。

单选框、复选框和下拉框的默认困境

单选框、复选框和下拉框的默认样式难以修改，主要是因为这些元素的结构复杂。它们包含各种子元素，如<option>、<optgroup>等，这些元素的样式相互影响，使得使用 CSS 进行控制变得困难。此外，下拉框在用户点击选项时会自动展开一个列表，这进一步增加了复杂性。

非语义元素和 JavaScript：破解外观难题

要解决这个问题，我们可以使用非语义元素（如<div>或<span>）和 JavaScript 来制作下拉菜单。这样做的好处在于，我们可以完全控制下拉菜单的外观和行为。

创建容器： 首先，用非语义元素创建一个容器，充当下拉菜单的包装器。
动态创建元素： 使用 JavaScript 动态创建<select>元素及其子元素，然后将它们添加到容器中。
添加语义信息： 最后，使用 WAI-ARIA 为下拉菜单提供语义信息，使其被屏幕阅读器正确识别。

通过这种方法，我们可以完全自定义下拉菜单的外观，使其与网页的整体设计保持一致，并提供更好的可访问性。

改写单选框和复选框的默认样式

对于单选框和复选框，我们也可以使用类似的方法。

创建容器： 创建一个非语义元素作为单选框或复选框的容器。
动态创建输入： 使用 JavaScript 动态创建<input>元素，并将其添加到容器中。
设置样式： 使用 CSS 设置<input>元素的外观和行为，使其看起来像单选框或复选框。

采用这种方法，我们同样可以完全控制单选框和复选框的外观，使其更加符合网页的设计，并提高可访问性。

示例代码

<div class="custom-select">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

<script>
  const select = document.querySelector('.custom-select select');

  const options = select.querySelectorAll('option');

  for (let i = 0; i < options.length; i++) {
    const option = options[i];

    option.addEventListener('click', () => {
      select.value = option.value;
    });
  }
</script>