html select下拉框樣式怎麼製作？ html select樣式詳解-html教學-PHP中文網

首頁

web前端

html教學

html select下拉框樣式怎麼製作？ html select樣式詳解

寻∝梦

Aug 30, 2018 am 11:32 AM

htmloptionselect

本篇文章主要的介紹了關於HTML select標籤的下拉框製作，還有HTML select標籤的樣式解析，最後還有兩個html select標籤的案例。接下來讓我們一起來看看本篇文章吧

首先我們先來看看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樣式詳解

我們已經把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>PHP中文网</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樣式詳解

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>

以上就是這篇文章的全部內容了，有什麼疑問歡迎在下方提問。

【小編推薦】

html5 canvas標籤是什麼意思？ canvas標籤使用方法介紹

HTML中插入文字ins標籤和刪除文字del標籤如何一起使用？（附實例）

以上是html select下拉框樣式怎麼製作？ html select樣式詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。