Dropdowns 下拉選單
從一系列選項中選擇出一個或多個選項，可以收納層級性的資料、簡化頁面上的資訊呈現。
下拉選單類型
適用平台：官網、網銀PC、行動銀行
| 種類 | Enabled | Open | New Selected | Disabled |
|---|---|---|---|---|
|
有固定文字 |
|
|
|
|
|
|
|
|
|
|
文字待選 |
|
|
|
|
|
|
|
|
下拉選單 (dropdowns)
SAMPLE
HTML
<select class="selectList">
<option>請選擇</option>
<option>選擇一</option>
<option>選擇二</option>
<option>選擇三</option>
<option>選擇四</option>
<option>選擇五</option>
<option>選擇六</option>
<option>選擇七</option>
</select>
複製
CSS
select {
position: relative;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: url(../img/dropdown.svg) no-repeat 98% center transparent;
}
select::-ms-expand {
visibility: hidden;
}
.selectList {
width: 100%;
background-color: white;
border: 1px solid #acacac;
padding: 8px 12px;
border-radius: 4px;
box-shadow: none;
outline: none;
box-sizing: border-box;
font-size: 16px;
position: relative;
}
.selectList:focus {
outline: none;
border: 1px solid #00a19b;
}
複製