css怎么更改表单的单选框或下拉框的默认样式？

在前端开发中，使用CSS来更改HTML表单元素（如单选框和下拉框）的默认样式是一个常见的需求。这些元素通常具有浏览器提供的默认样式，但你可以使用CSS来覆盖这些样式，以实现自定义的外观。

1. 单选框（Radio Buttons）

单选框的默认样式可以通过使用伪元素和隐藏原始单选框来更改。以下是一个基本的示例：

<label class="custom-radio">
  <input type="radio" name="option" hidden>
  <span class="radio-btn">
    <span class="inside"></span>
  </span>
  Option 1
</label>

.custom-radio .radio-btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 5px;
  position: relative;
  border: 2px solid #000;
  border-radius: 50%;
}

.custom-radio .radio-btn .inside {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 10px;
  width: 10px;
  background-color: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.custom-radio input[type="radio"]:checked + .radio-btn .inside {
  opacity: 1;
}

2. 下拉框（Select Boxes）

下拉框的样式化稍微复杂一些，因为浏览器对下拉部分的渲染方式差异很大。不过，你可以自定义下拉框的可见部分。以下是一个基本的示例：

<div class="custom-select">
  <select name="options">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>
</div>

.custom-select {
  position: relative;
  width: 200px;
}

.custom-select select {
  width: 100%;
  height: 40px;
  padding: 5px;
  border: 2px solid #000;
  border-radius: 5px;
  -webkit-appearance: none; /* Remove default appearance on WebKit browsers */
  -moz-appearance: none; /* Remove default appearance on Firefox */
  appearance: none; /* Remove default appearance */
}

/* Add arrow for dropdown (optional) */
.custom-select::after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none; /* Prevent clicking on the arrow from interacting with the select */
}