如何更改选择下拉箭头的颜色？答案

【问题标题】：How to change colour of select dropdown arrow?如何更改选择下拉箭头的颜色？
【发布时间】：2022-08-19 14:46:31
【问题描述】：

我正在尝试使用 CSS 更改选择下拉箭头的颜色。目前，它是黑色的。我想把它改成白色。

谁能有任何想法来解决这个问题？

html

    <select class=\"custom-select mt-1 ml-2\" id=\"e\" style=\"font-family:Poppins;1px solid #FFFFFF;font-size:12px;color: #000000;border-radius: 30px;width:130px;height:36px;background-color:#5A71E1;color:#FFFFFF;\">
            <option value=\"Andhra Pradesh\" selected style=\"color:#FFFFFF;\">English</option>
            <option value=\"Karnataka\" style=\"color:#FFFFFF;\">Malayalam</option>
            <option value=\"Kerala\" style=\"color:#FFFFFF;\">Hindi</option>
            <option value=\"Tamil Nadu\" style=\"color:#FFFFFF;\">Telungu</option>
            <option value=\"Telungana\" style=\"color:#FFFFFF;\">Kannada</option>
    </select>

我将添加代码。@Alon Eitan
我已经添加了代码。请检查一下。@ Alon Eitan
在 Firefox 和 Google Chrome 中它是白色的v。从您的屏幕截图中，我认为它在手机屏幕上？您使用的是默认选择框三角形符号，我建议使用cusom triangle。
实际上，它是桌面屏幕。我裁剪屏幕截图。@ vee
参考这个解决方案：stackoverflow.com/questions/31531865/…

标签： html css

【解决方案1】：

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

【讨论】：

【解决方案2】：

您正在使用引导 v4+因为custom-select 是预定义引导 css 文件中的类。所以如果你想改变箭头颜色选择元素，那么您需要在 svg 中从 css backgound propetry 更改为 fill="#ffffff"。

希望下面的sn-p对你有很大帮助。

body{
  background: #5a71e1 !important;
  padding: 20px;
}


.custom-select{
  font-family: Poppins;
  border: 1px solid #FFFFFF !important;
  font-size: 12px!important;
  border-radius: 30px!important;
  width: 130px!important;
  height: 36px;
  background-color: #5A71E1!important;
  color: #FFFFFF!important;
  background: #5A71E1 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'><path fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") right .75rem center/8px 10px no-repeat!important;
 }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<select class="custom-select">
  <option value="Andhra Pradesh" selected>English</option>
  <option value="Karnataka">Malayalam</option>
  <option value="Kerala">Hindi</option>
  <option value="Tamil Nadu">Telungu</option>
  <option value="Telungana">Kannada</option>
</select>

【讨论】：

【解决方案3】：

select {
    background: #404040 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="%23ffffff" d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>') right 1rem center/8px 10px no-repeat;
}

【讨论】：

欢迎！虽然这段代码可以解决问题，including an explanation 解决问题的方式和原因确实有助于提高帖子的质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请编辑您的答案以添加解释并说明适用的限制和假设。