對下拉式選單 <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 屬性的使用時機有兩種:

  1. 替元素套用瀏覽器專屬的預設樣式,或是
  2. 替元素移除掉瀏覽器專屬的預設樣式

舉例來說,在 Webkit 的瀏覽器 (如 Safari) 中,<input type="search"> 的樣式會具有些微的圓角 (border-radius) 效果,如果不希望該元素在預設有這種樣式的話,便可以透過 appearance 來實現。

jQuery 函式庫: Select 2

如果你嘗試執行了前面提供的範例,會發現這樣子的樣式,只會涵蓋到下拉選單本身,並無法適用到下拉選單的「選項」。

如果說要連選項的樣式都客製化的話,只能透過 JavaScript,將可以定義樣式的 DOM 元素,模擬成是選單中的選項。換句話說,使用者實際上看到的,並不是 option 元素,而是其他的 divli 元素,只是透過 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' );

接著新增 selectoption 元素:

<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 的方式,來確認哪一種作法,對於最終轉換率最有幫助。

預設圖片
Eric Chuang
正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124