保持选择选择颜色并添加png作为背景答案

【问题标题】：Keep select select colour and add png as background保持选择选择颜色并添加png作为背景
【发布时间】：2019-03-28 16:13:56
【问题描述】：

我试图保持选择输入的颜色，但也添加箭头 png。你能帮忙吗

 select {
        -webkit-appearance: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: url(../images/arrow_select.png) right 5px center no-repeat!important;
        background-color: rgba(0, 0, 0, 0.3);
        padding: 15px;
        height: 47px;

<html>
<body>
<select id="dropdown">
        <option selected></option>
            <option>Mr</option>
            <option>Mrs</option>
            <option>Ms</option>
</select>
       
</body>
</html>

【问题讨论】：

JS fiddle 或者什么是可执行的？

标签： html css forms select

【解决方案1】：

    -webkit-appearance: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(../images/arrow_select.png) right 5px center no-repeat!important;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 15px;
    height: 47px;

 <html>
 <body>
 <select id="dropdown">
        <option selected></option>
            <option>Mr</option>
            <option>Mrs</option>
            <option>Ms</option>
       </select>
       </body>
       </html>

【讨论】：

【解决方案2】：

您可以在单个 CSS 行中同时指定图像和颜色以使其工作。

select {
  box-sizing: border-box;
  background: url(https://via.placeholder.com/20x20/00ff00) right 5px center no-repeat, rgba(0, 0, 0, 0.3);
  padding: 15px;
  height: 47px;
}

<select>
  <option></option>
  <option>One</option>
  <option>Two</option>
</select>

【讨论】：

这不起作用，但谢谢。我所做的是将它包装在一个 div 中，并为该 div 赋予背景颜色。
@Alinacdn 有趣，我可以在运行 sn-p 时看到它在这里工作。无论如何，祝你的项目好运。