css如何加入顏色實心框?
方法/步驟
1,新建一個html文件,命名為test.html ,用于介紹如何用css改變下拉框select樣式。
2,在test.html頁面,使用div創建一個模塊,設置其class屬性為select1,用于下面對該類名進行樣式布局。
3,在div模塊內,使用select標簽創建一個下拉選擇框,下拉列表是三個顏色的選擇。
4,使用css對div進行樣式布局,設置其寬度為298px ,高度為60px,并給它一個透明的背景顏色,設置其為圓角邊框。
5,使用css對select下拉框進行樣式的設置,設置其寬度為300px(比外層的div寬度大一點,效果更加好看),高度為100%。
6,再使用css對select下拉框的細節進行設置,設置其背景透明(background: transparent),無邊框(border: none),左內邊距為10px(padding-left: 10px),邊框為圓角(border-radius: 10px),字體為微軟雅黑(font-family: "微軟雅黑")。
7,在瀏覽器運行test.html文件,查看select樣式框的美化效果。