如何设置HTML下拉菜单的样式

Question

代码：

 <select name="xyz" id="abc">
       <option value="x">10/Page</option>
       <option value="y">20/Page</option>
       <option value="z">30/Page</option>
  </select>

select {
  display: flex;
  outline: none;
  cursor: pointer;
  border: none;
}

option {
  background: #f4f9fb;
  border-radius: 4px;
  border: none;
  outline: none;
}

<select name="xyz" id="abc">
  <option value="x">10/Page</option>
  <option value="y">20/Page</option>
  <option value="z">30/Page</option>
</select>

我曾尝试使用此代码来更改select选项的样式，但是什么也没发生

预期结果：

Answer 1

默认情况下，您无法更改某些控制器的默认用户界面，例如select，radio，checkbox。每个浏览器都有自己的用户代理样式。 所以您应该创建一个自定义的 为此，您应该隐藏display:none样式的主控制器，然后使用label，span或您想要的任何内容创建自己的控制器。 然后，要连接自定义控制器和主控制器，可以使用for属性。

<select id="myselect">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<label for="myselect">
  <span>1</span>
 <span>2</span>
 <span>3</span>
</label>

然后，您只需要设置自定义控制器的样式即可使其类似于选择框。

Answer 2

我使用bootstrap-select来做到这一点，

$(function () {
        $('select').selectpicker();
    });

 <!-- Bootstrap JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
 <!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"> 
 
 <select name='select' class="form-control" multiple="true" >
 <option>1</option>
 <option>2</option>
 <option>3</option> 
 </select>

参考插件here