[英]Custom HTML Select Arrow Image
我想隱藏 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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.