CSS可以用來設計下拉列表。在下拉列表中,我們想要讓選項在被選中時有不同的樣式,以及將列表的樣式美化。
select { /*將邊框設置為無*/ border: none; /*將下拉箭頭改為自定義圖標*/ background-image: url('custom-arrow.png'); /*添加內邊距使得文本與下拉箭頭不會重疊*/ padding-right: 20px; /*為下拉列表定制背景顏色*/ background-color: #F2F2F2; /*添加陰影效果,使下拉列表看起來更立體*/ box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); } option:checked { /*為選中的選項添加背景顏色*/ background-color: #0078D7; /*為選中的選項添加文本顏色*/ color: #fff; }
在上述代碼中,我們首先將下拉列表的邊框去掉,將下拉箭頭替換為自定義的圖標,添加內邊距來防止文本與箭頭重疊,并定制列表的背景顏色和陰影效果。然后,我們為被選中的選項添加了背景顏色和文本顏色,用以區分其它未選項。
上一篇css圖片自動放大和縮小
下一篇2018京東html代碼