我想隐藏html选择列表的默认箭头,并将自定义图像(箭头)添加到列表中。
.form-inline select {
margin: 10px 35px 15px 0px;
background-color: #fff;
font-size: 30px;
width: 80px;
color: #000;
background-image: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-512.png") center bottom no-repeat;
cursor: pointer;
display: block;
outline: none;
-webkit-appearance: none;
appearance: none;
border: none !important;
justify-content:center;
align-items:center;
text-align:center;
}
这是我目前的风格。它没有显示我想要的箭头。请帮帮我。
您将background
和background-image
CSS样式混合在一起,难怪您的样式无效:
短版:(我使用的是background
而不是background-image
)
background: salmon url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-512.png") no-repeat center calc(100% - 2px);
background-size: 24px 24px;
但是我建议采用这种方式,以便更轻松地进行修改:
background-color: #fff;
background-image: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-512.png");
background-size: 24px 24px;
background-repeat: no-repeat;
background-position: center calc(100% - 2px);
仅供参考,此CSS部分将隐藏浏览器的默认箭头:
-webkit-appearance: none;
appearance: none;