鼠年全馬鐵人挑戰04:自製select 選單樣式(上) | select下拉選單css
前言使用HTML的select與option標籤製作的下拉式選單,在每個瀏覽器有各自預設的樣式,即使用appearance:none;清掉瀏覽器預設樣式,在CSS使用上仍然有很大的限制,例如沒有辦法修改下拉選單周圍的border樣式。在w3schoolsHowTO-CustomSelectBox[1]這個條目下,有自製select選單的參考。w3schools的方法的優點,在於對原本HTML架構的調整非常少,並且CSS設定的部分就像是一般在設定其它元素的樣式一樣,可以自由的進行調整。運作原理是用JS產生新的、對應到原本select、option內容的div元素,之後用CSS隱藏原本的選單、控制新產生的div...
前言使用 HTML 的 select 與 option 標籤製作的下拉式選單,在每個瀏覽器有各自預設的樣式,即使用 appearance: none; 清掉瀏覽器預設樣式,在 CSS 使用上仍然有很大的限制,例如沒有辦法修改下拉選單周圍的 border 樣式。
在 w3schools How TO - Custom Select Box[1] 這個條目下,有自製 select 選單的參考。
w3schools 的方法的優點,在於對原本 HTML 架構的調整非常少,並且 CSS 設定的部分就像是一般在設定其它元素的樣式一樣,可以自由的進行調整。運作原理是用 JS 產生新的、對應到原本 select、option 內容的 div 元素,之後用 CSS 隱藏原本的選單、控制新產生的 div 選單。
這篇文章主要參考 w3schools,加入自己實作的記錄,和對 w3schools 寫法的說明。
用新的 custome-select div 包裹原本的 select 標籤首先考慮一個基本的 select、option 架構,以這個 CodePen[2] 為例。
首先在原本的 select 外,加入一層 div,class 命名為 custom-select,如同這個 CodePen[3]。
123456789<div class="custom-select"> <select> <option>選項 1</option> <option>選項 2</option> <option>選項 3</option> <option>選項 4</option> <option>選項 5</option> </select></div>在 CSS 的部分設定
1234567.custom-select { position: relative; font-family: PingFangTC, 微軟正黑體, sans-serif; width: 200px; ma...