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