html - 保持选择选择颜色并添加png作为背景

标签 html css forms select

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

最佳答案

您可以在单个 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>

关于html - 保持选择选择颜色并添加png作为背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52965731/

相关文章:

用于根据原始宽度但以百分比设置图像宽度的 Javascript 公式

javascript - 工具提示显示 anchor 标记超出 td 元素

javascript - 在 WebView 中提交表单 - Swift 3.1

html - 将按钮的位置更改为向上

html - 本地日期时间的替代方法

html - 第三子菜单未与二级子菜单中的选定菜单内嵌显示

javascript - 如何配置此选项卡 slider

c# - 表单应用程序C#的无限while循环

java - 提交后如何访问表单数据

html - 如何在 HTML 中嵌入 Windows Media Player (WMV) 电影?