Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
對下拉式選單 <select> 進行樣式調整
之前為了配合同事的樣稿，因此
如果要針對下拉選單的樣式進行調整，必須透過 apperance 這個樣式屬性。
select {
background: #003d79;
color: #fafafa;
margin: 15px;
width: 300px;
height: 3em;
padding: 8px;
position: relative;
border-radius: 5px;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(#003d79, #003d79);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E"), -webkit-linear-gradient(#003d79, #003d79);
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E"), -moz-linear-gradient(#003d79, #003d79);
background-position: right 0.5em top 50%, 0 0;
background-size: contain, cover;
background-repeat: no-repeat, repeat;
}上述的執行結果，可以參考這個 Codepen：
See the Pen Styling <select> Dropdown by Eric Chuang (@eric-chuang) on CodePen.
appearance
其實 appearance 這個屬性，本來的功能是要告訴瀏覽器當前元素的樣式應該如何定義。根據 CSS Tricks 的文章，appearance 屬性的使用時機有兩種：
- 替元素套用瀏覽器專屬的預設樣式，或是
- 替元素移除掉瀏覽器專屬的預設樣式
舉例來說，在 Webkit 的瀏覽器 (如 Safari) 中，<input type="search"> 的樣式會具有些微的圓角 (border-radius) 效果，如果不希望該元素在預設有這種樣式的話，便可以透過 appearance 來實現。
jQuery 函式庫: Select 2
如果你嘗試執行了前面提供的範例，會發現這樣子的樣式，只會涵蓋到下拉選單本身，並無法適用到下拉選單的「選項」。
如果說要連選項的樣式都客製化的話，只能透過 JavaScript，將可以定義樣式的 DOM 元素，模擬成是選單中的選項。換句話說，使用者實際上看到的，並不是 option 元素，而是其他的 div 或 li 元素，只是透過 JavaScript 動態將選項值回傳給 select 而已。
說完原理後，這裡要介紹一款相依於 jQuery 的函式庫 Select 2。
首先，你需要先引用函式庫。我們這裡用熟悉的 wp_enqueue_scripts() 來進行。
function hyc_enqueue_scripts(){
wp_enqueue_script( 'select2', 'https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js', array( 'jquery' ) );
wp_enqueue_style( 'select2-style', 'https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css' );
}
add_action( 'wp_enqueue_scripts', 'hyc_enqueue_scripts' );接著新增 select 與 option 元素：
<select name="name" id="select2-here">
<option value="First value">First</option>
<option value="Second value">Second</option>
<option value="Third value">Third</option>
<option value="Forth value">Forth</option>
<option value="Fifth value">Fifth</option>
</select>最後再透過 jQuery 的方式，啟用 Select 2：
( function( $ ) {
$( '#select2-here' ).select2();
} )( jQuery );執行後的結果如下：
See the Pen qBNdXRV by Eric Chuang (@eric-chuang) on CodePen.
結語
關於是否應該要自訂 select 樣式，其實仍然要看客戶的需求。如同前面所述的，想要完全客製化的話，勢必要透過 JavaScript 的方法來實踐，這背後會牽涉到潛在的效能問題。
然而，比起效能，更重要的還是使用者體驗，尤其是在行動裝置上。手機瀏覽器的預設下拉式選單，因為不論是哪種網站，基本上都是相同的樣式，使用者不需要重新熟悉新的樣式，可以提高易用性。
也因為這種作法實際上有利有弊，因此建議可以透過 A/B Test 的方式，來確認哪一種作法，對於最終轉換率最有幫助。
