Checkbox 核取方塊

允許用戶可以在一系列選項中，「複選」選項。

核取方塊類型

適用平台：官網、行動銀行、網銀PC

種類 Enabled Selected Disabled

Checkbox group
  • 邊框：#ACACAC
  • 邊框：#00A19B
  • 底色：#00A19B
  • 選取勾：#FFFFFF
  • 核取方塊與打勾符號比例 1:1
  • 邊框：#ACACAC
  • 底色：#FFFFFF / #ACACAC
  • 選取勾：無 / #FFFFFF

List group
  • 邊框：#ACACAC
  • 邊框：#00A19B
  • 底色：#00A19B
  • 選取勾：#FFFFFF
  • 核取方塊與打勾符號比例 1:1
  • 邊框：#ACACAC
  • 底色：#ACACAC
  • 選取勾：無

核取方塊 (checkbox)

SAMPLE

HTML

                                            
<input type="checkbox" class="checkbox-input" id="checkbox" name="checkbox">
<label class="checkbox-label" for="checkbox">範例條款選項</label>
複製

CSS

                                            
.checkbox-input {
    /*隱藏原先樣式*/
    visibility: hidden;
    }
    
    .checkbox-label {
    /*將label設定成可以被點選觸發*/
    position: relative;
    padding-left: 1.5rem;
    }
    
    [type=checkbox]:not(:checked) + label:before,
    [type=checkbox]:checked + label:before {
    /*未被觸發時顯示樣式*/
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    border: 1px solid #00a19b;
    background: #FFF;
    border-radius: 4px;
    }
    
    [type=checkbox]:checked + label:before {
    background-color: #00a19b !important;
    }
    
    [type=checkbox]:not(:checked) + label:after,
    [type=checkbox]:checked + label:after {
    /*觸發時顯示樣式*/
    content: "";
    background-image: url(../img/icon_check.svg);
    background-size: 0.75rem 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    }
複製