｜CSS｜Custom Select Styles with CSS
想自訂網頁的下拉選單 <select> 更符合網頁整體風格，可以透過 CSS 自訂 <select> 外觀，這篇將簡單介紹如何修改。
首先用以下程式碼移除 <select> 預設樣式，方便之後的自定義。
css
select[name="lang"]{
appearance: none; /* 移除瀏覽器的預設外觀 */
-moz-appearance: none;
-webkit-appearance: none;
border: none; /* 移除邊框 */
background: none; /* 移除背景 */
padding: 0; /* 移除內邊距 */
margin: 0; /* 移除外邊距 */
outline: none; /* 移除聚焦樣式 */
}
/* ie移除箭頭 */
select[name="lang"]::-ms-expand{ display:none;}
再自訂 <select> 樣式，以 Style-A 為例。這段 CSS 為 <select> 設計自訂樣式有包含箭頭（::before）、分隔線（::after）及 hover 背景效果。
顏色變數：使用 --color-main（黑色）、--color-main-ov（深灰色）、 --color-sub（白色）管理配色。
箭頭（::before）：使用白色邊框做成向下箭頭。位置固定於 <select> 右側，垂直置中並旋轉 135度。
分隔線（::after）：灰色細線，高度縮放為 <select> 的70%。位於箭頭左側。
背景效果：.bg_select 為黑色背景層，覆蓋整個容器。hover 時，背景透明度為 0.7。
※border-left：設為透明且帶有固定寬度數值，目的是取代 padding-left 的功能(在 <select> 設定 padding-left 會出現bug，外觀視覺會和 CSS 所寫的數值不一致)。
css
/* ↓ Style-A */
.style-a{ --color-main:#000; --color-main-ov:#4d4d4d; --color-sub:#fff;}
.style-a select[name="lang"]{ padding:min(7vw, 7px) min(19vw, 52px) min(2vw, 5px) 0;
border-left:min(25vw, 18px) solid transparent; /* 撐開padding-left */
color:var(--color-sub); font-family:times; line-height:1.062;
}
.style-a select[name="lang"] option{ background-color:var(--color-main);}
/* 箭頭 arrow */
.style-a::before{ content:"";
width:min(3vw, 7px); aspect-ratio:1 / 1;
border-right:min(0.8vw, 2px) solid var(--color-sub);
border-top:min(0.8vw, 2px) solid var(--color-sub);
right:min(3vw, 10px);
top:50%;
transform:translateY(-75%) rotate(135deg);
position:absolute;
}
/* 分隔線 divider */
.style-a::after{ content:"";
width:min(0.8vw, 2px);
height:100%;
background-color:#999;
transform:scaleY(0.7);
transform-origin:center;
right:min(10vw, 30px);
top:0;
position:absolute;
}
.style-a .bg_select{ background-color:var(--color-main);
position:absolute; inset:0; z-index:-1;
transition:opacity 0.4s;
}
.style-a .select-con:hover .bg_select{ opacity:0.7;}
以下 Style-C 的 CSS 樣式。這段 CSS 為 <select> 設計自訂樣式有包含箭頭圖片（::after）、hover 效果。
顏色變數：--color-main：黑色 (#000)、--color-main-ov：深灰色 (#4d4d4d)、--color-sub：白色 (#fff)、--color-sub-ov：淺灰色 (#ddd)
箭頭圖片（::after）：用偽元素做成白色圓底再搭配黑色箭頭圖片，固定在 <select> 右側並垂直置中。
背景效果：.bg_select 為黑色背景層，覆蓋整個容器。hover 時變深灰色 (--color-main-ov)。
※border-left：設為透明且帶有固定寬度數值，目的是取代 padding-left 的功能(在 <select> 設定 padding-left 會出現bug，外觀視覺會和 CSS 所寫的數值不一致)。
css
/* ↓ Style-C */
.style-c{ --color-main:#000; --color-main-ov:#4d4d4d; --color-sub:#fff; --color-sub-ov:#ddd;}
.style-c select[name="lang"]{ padding:min(7vw, 7px) min(35vw, 42px) min(6vw, 5px) 0;
color:var(--color-sub); font-family:Arial; line-height:1.055;
border-left: min(25vw, 24px) solid transparent; /* 撐開padding-left */
}
.style-c select[name="lang"] option{ background-color:var(--color-main);}
/* 箭頭 arrow */
.style-c::after{ content:"";
height:55%; aspect-ratio: 1 / 1;
border-radius:15vw;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Dc-T0gV0E6I8UOqLBjSmEYOzo8vW2fPB8NSpuOmWm-9xAvCPagJKkvv5Fu02ZMJQFJzlYxM5Lj1Xpqu8Wb_stttASNy5Wq4g3iCseNim_W9k5R0qcYzvR86SekN8YiFi6NEfoAS8bL3uXDAdkL2by37_fd-YOovXWulbjFWFkiBBdc0O-_sO9sQH9Xd0/s1600/arrow-mask.png);
background-position:center min(3vw, 6.5px);
background-size:63% auto;
background-repeat:no-repeat;
background-color:var(--color-sub);
right:min(3.8vw, 8px);
top:50%;
transform:translateY(-50%);
position:absolute;
transition:background-color 0.4s;
}
.style-c:has(.select-con:hover)::after{ background-color:var(--color-sub-ov);}
.style-c .bg_select{ border-radius:min(5vw, 8px);
background-color:var(--color-main);
position:absolute; inset:0; z-index:-1;
transition:background-color 0.4s
}
.style-c .select-con:hover .bg_select{ background-color:var(--color-main-ov);}
