Radio button 單選鈕

從一系列答案選項中，只能選擇1個答案。

單選鈕狀態

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

Radio button直徑24px ，selected後的白色原點為8px，若有其他大小需求，兩個大小比例是3:1

Enabled Hover Selected Disabled
  • 邊框：#D9D9D9
  • 邊框：#00A19B
  • 填色：#00A19B
  • 填色：#ACACAC

單選按鈕 (radiobutton)

SAMPLE

HTML

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

CSS

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