Hi,歡迎訪問前端老白
CSS 可以讓我們非常方便地修改下拉圖標的樣式。
/* 首先，我們需要為元素添加一個背景圖片 */ select { background-image: url('down_arrow.png'); background-repeat: no-repeat; background-position: right center; /* 圖片居于右側，并垂直居中 */ -webkit-appearance: none; /* 去掉瀏覽器默認的下拉圖標 */ -moz-appearance: none; appearance: none; } /* 接著，我們需要為下拉圖標單獨設置樣式 */ select::-ms-expand { display: none; /* 微軟 Edge 下的下拉圖標不會消失，需要設置為不顯示 */ } select::after { content: ''; /* 偽元素用于承載自定義下拉圖標 */ display: block; width: 16px; height: 16px; background-image: url('custom_arrow.png'); /* 自定義的下拉圖標 */ position: absolute; top: 50%; right: 8px; margin-top: -8px; /* 垂直居中 */ }
通過設置背景圖片和使用偽元素，我們就可以非常靈活地修改下拉圖標的樣式了。
老白網(wǎng)絡 (http://52shenghuonet.cn/) 前端 后端 zblog主題.網(wǎng)站地圖xml
