明輝手游網(wǎng)中心：是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)！

html select下拉框樣式如何制作？html select樣式詳細(xì)說(shuō)明

發(fā)表時(shí)間：2023-09-03 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章主要的介紹了關(guān)于HTML select標(biāo)簽的下拉框制作，還有HTML select標(biāo)簽的樣式解析，最后還有兩個(gè)html select標(biāo)簽的案例。接下來(lái)讓我們一起看看本篇文章吧首先我們先來(lái)看看html select下拉框樣式的制作：原生的select下拉框其實(shí)挺方便的，直接把選項(xiàng)寫入opti...
本篇文章主要的介紹了關(guān)于HTML select標(biāo)簽的下拉框制作，還有HTML select標(biāo)簽的樣式解析，最后還有兩個(gè)html select標(biāo)簽的案例。接下來(lái)讓我們一起看看本篇文章吧

首先我們先來(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>php中文網(wǎng)之下拉列表</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)開(kāi)之后的效果圖：

tuyi.png

我們已經(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>php中文網(wǎng)</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>PHP中文網(wǎng)</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ì)給效果圖的：

tuer.png

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>

以上就是這篇文章的全部?jī)?nèi)容了，有什么疑問(wèn)歡迎在下方提問(wèn)。

【小編推薦】

html5 canvas標(biāo)簽是什么意思？canvas標(biāo)簽使用方法介紹

HTML中插入文本ins標(biāo)簽和刪除文本del標(biāo)簽如何一起使用？（附實(shí)例）

以上就是html select下拉框樣式怎么制作？html select樣式詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。