Question

我试图保留选择输入的颜色，但还要添加箭头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>

Answer 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>

Answer 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>

保持选择选择颜色并将png添加为背景

2 个答案: