首先我們先來看看html select下拉框樣式的製作：
原生的select下拉框其實挺方便的，直接把選項寫入option就能得到一個流暢的下拉框，但是原生的樣式也是讓人憂愁。
首先，在各大瀏覽器中渲染出來的樣式結果也是多樣化，ie下的樣式更是與眾不同，會根據選項位置進行滑動。
我們這裡是用純HTML製作，連層疊樣式表也不要：
<!doctype html><html ><head> <meta charset="UTF-8"> <script type="js/index.js"></script> <title>php中文網之下拉式清單</title></head><body ><form><p>下拉式清單</p><select><option>html</option><option>php</option><option>python</option><option>其它</option> <option>html</option><option>php</option><option>python</option><option>其它</option></select></form></body></html>
這個我點開之後的：
我們已經把HTML select的下拉框已經製作完成了，接下來我們看看HTML select的其它樣式思路：
1.先去掉select本身原有的樣式。
2.用一個元素（div/lebal等）作為select的父元素。
3.在select父元素後面用：after做一個新的樣式。
<body> <br /> <select id="selectTravelCity" title="Select Travel Destination"> <option>php中文網</option> <option>Washington DC</option> <option>Los Angeles</option> <option>Chicago</option> <option>Houston</option> <option>Philadelphia</option> <option>Phoenix</option> </select> <br /> <br /> <label id="lblSelect"> <select id="selectPointOfInterest" title="Select points of interest nearby"> <option>topic.alibabacloud.com</option> <option>food beverage</option> <option>restaurant</option> <option>shopping</option> <option>taxi limo</option> <option>theatre</option> <option>museum</option> <option>computers</option> </select> </label></body>
這麼多，雖然不是很難，但是還是要多練習的
看了上面的圖片，這個的也很容易能想到吧，不過我還是會給的：
HTML select標籤的兩個案例分析：
案例一：如何讓html裡的select無法選擇？
假設有一個select，裡面有幾個option，因為測試需要，要固定成為其中的一個option，不能選擇其他，該怎麼做呢？如果disabled這個select，結果就是根本沒法取到值了。有沒其他的方法？readonly，也是不可以的，依舊可以選擇。
答案：只放一個option就可以了 或者給option加上disabled="disabled"
<form id="form1" name="form1" method="post" action=""> <select name="select"> <option>aa</option><option disabled="disabled">bb</option><option>cc</option> </select></form>
案例二：怎麼調整select的寬度？
答案：可以在select標籤中加入style樣式
<style>.s1{ width: 200px;}</style><select class="s1"> <OPTION>很長很長也能顯示</OPTION> <OPTION>很長很長也能顯示</OPTION></select>
以上就是這篇文章的全部內容了，有什麼疑問歡迎在下方提問。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
