css下拉列表框怎么设置

CSS 下拉列表框是 Web 开发中常用的组件之一，可用于选择一个或多个选项。

通常我们采用 HTML 的 select 元素来实现下拉列表框，但其样式并不符合我们的需求。因此，我们可以使用 CSS 对 select 元素进行样式的自定义。

下面是一个简单的 CSS 下拉列表框的代码实现：

 <select class="custom-select">
    <option selected>请选择</option>
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
  </select>
  
  <style>
    .custom-select {
      appearance: none; /* 去除默认样式 */
      -moz-appearance: none;
      -webkit-appearance: none;
      width: 150px; /* 指定宽度 */
      background: #fff; /* 指定背景色 */
      border: 1px solid #ccc; /* 指定边框 */
      padding: 5px 30px 5px 10px; /* 指定内边距 */
      font-size: 14px; /* 指定字号 */
    }
    .custom-select::-ms-expand { /* 去除 IE 下箭头 */
      display: none;
    }
    .custom-select option[selected] { /* 指定选中样式 */
      background-color: #ddd;
    }
  </style> 

在上述代码中，我们添加了自定义样式，去除了默认样式，指定了宽度、背景色、边框、内边距以及字号等属性。同时，我们还指定了选中样式的背景颜色，并去除了 IE 下的箭头。

通过这种方式，我们可以轻松地实现一个自定义的 CSS 下拉列表框。