自定义CSS样式的select下拉框无法显示正确背景色该如何解决？

问题原因 #

背景色不生效是CSS属性覆盖导致的：你先单独声明了background-color: #FCFCFC !important，但后续使用的background简写属性会重置所有背景相关配置，你在简写中指定的背景色为#ddd，直接覆盖了前面设置的#FCFCFC。

解决方法 #

任选以下一种方案修改即可：

• 直接调整background简写属性中的色值，将其中的#ddd替换为你需要的#FCFCFC
• 将background简写拆分为多个独立的背景属性（background-image、background-repeat、background-position），避免覆盖已设置的背景色

修改后代码示例 #

<select name="member_area" id="member-box" style="
    background-color: #FCFCFC !important;
    opacity: 1;
    font-size: 11px !important;
    font-weight: 300;
    /* 仅修改了background简写中的背景色为#FCFCFC */
    background: url('https://cdn3.iconfinder.com/data/icons/trico-arrows-1/24/ExpandUpDownSmall-512.png') no-repeat right #FCFCFC;
    background-position: 98%;
    padding: 2px 20px 2px 8px;
    background-size: 14px;
    -webkit-appearance: none;
    outline: none !important;
    -webkit-border-radius: 4px;
    border: 1px  solid #cccccc;
    box-shadow: rgb(0 0 0 / 12%) 0px -10px 36px -28px inset;
    text-shadow: 1.1px 1px rgb(0 0 0 / 20%);
    margin-right: 2px;
    margin-left: 4px;
    position: relative;
    top: 2px;
">
      <option value="Members">Members</option>
      <option value="Member_1">Member 1</option>
      <option value="Member_2">Member 2</option>
      <option value="Member_3">Member 3</option>
   </select>

如果选择拆写背景属性的话，对应部分调整为：

background-image: url('https://cdn3.iconfinder.com/data/icons/trico-arrows-1/24/ExpandUpDownSmall-512.png');
background-repeat: no-repeat;
background-position: right;

内容的提问来源于stack exchange，提问作者Harpreet Singh Kapula