html select下拉框樣式如何制作

發(fā)布時(shí)間：2020-09-26 14:52:52 來(lái)源：億速云閱讀：943 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)html select下拉框樣式如何制作，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

首先我們先來(lái)看看html select下拉框樣式的制作：

原生的select下拉框其實(shí)挺方便的，直接把選項(xiàng)寫入option就能得到一個(gè)流暢的下拉框，但是原生的樣式也是讓人憂愁。

首先，在各大瀏覽器中渲染出來(lái)的樣式結(jié)果也是多樣化，ie下的樣式更是與眾不同，會(huì)根據(jù)選項(xiàng)位置進(jìn)行滑動(dòng)。

我們這里是用純HTML制作，連層疊樣式表也不要：

<!doctype html>
<html >
<head>
    <meta charset="UTF-8">
    <script type="js/index.js"></script>
    <title>億速云之下拉列表</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>

這個(gè)我點(diǎn)開之后的效果圖：

html select下拉框樣式如何制作

我們已經(jīng)把HTML select的下拉框已經(jīng)制作完成了，接下來(lái)我們看看HTML select的其它樣式思路：

1.先去掉select本身原有的樣式。

2.用一個(gè)元素（div/lebal等）作為select的父元素。

3.在select父元素后面用：after做一個(gè)新的樣式。

<body>
        <br />
        <select id="selectTravelCity" title="Select Travel Destination">
            <option>億速云</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>億速云</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>

這么多，雖然不是很難，但是還是要多練習(xí)的

看了上面的圖片，這個(gè)的效果圖也很容易能想到吧，不過(guò)我還是會(huì)給效果圖的：

html select下拉框樣式如何制作

HTML select標(biāo)簽的兩個(gè)案例分析：

案例一：如何讓html里的select無(wú)法選擇？

假設(shè)有一個(gè)select，里面有幾個(gè)option，因?yàn)闇y(cè)試需要，要固定成為其中的一個(gè)option，不能選擇其他，該怎么做呢？如果disabled這個(gè)select，結(jié)果就是根本沒(méi)法取到值了。有沒(méi)其他的方法？readonly，也是不可以的，依舊可以選擇。

答案：只放一個(gè)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>

案例二：怎么調(diào)整select的寬度？

答案：可以在select標(biāo)簽中加入style樣式

<style>.s1{ width: 200px;}</style>
<select class="s1">
  <OPTION>很長(zhǎng)很長(zhǎng)也能顯示</OPTION>
  <OPTION>很長(zhǎng)很長(zhǎng)也能顯示</OPTION>
</select>

關(guān)于html select下拉框樣式如何制作就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

html select下拉框樣式如何制作

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽