Radio button和Checkbox放大並自訂樣式

Radio button和Checkbox在電腦版雖然很小,沒特別注意的話也不會感覺到特別難按;
但如果你也在煩惱為了RWD(Responsive Web Design響應式設計),而不得不把按鈕透過CSS的方式讓它看起來至少變大顆,這裡就用程式碼直接讓你學會,不只讓你能將按鈕變大顆,也能教你把按鈕透過CSS自訂成想要的樣式噢!
(延伸閱讀:RWD教學-只要兩行就能輕鬆見效的實作經驗)

Radio button和Checkbox預設樣式

原本樣式
原本樣式

對沒錯,上面這個圖片就是最原始的樣式,按鈕小到連游標要點其實都有點小困難,雖然說大部分在應用上會搭配文字,只要透過label標籤的for屬性連結input標籤的id屬性,這時點擊文字就能完成選擇了!

但通常系統做出來第一件事都會要求直接放大按鈕大小就好,
那我們先看一下Html原始碼:

<!-- HTML -->

<body>
    <!-- 這是圓型按鈕測試 -->
    <p>CheckBox</p>
    <div class="ckbutton">
        <input type="checkbox" class="ckbutton_checkbox" id="ckbutton_id" checked>
        <label class="ckbutton_label" for="ckbutton_id"></label>

        <input type="checkbox" class="ckbutton_checkbox" id="ckbutton_id2">
        <label class="ckbutton_label" for="ckbutton_id2"></label>

    </div>
    <br />
    <p>RadioButton</p>
    <!-- radio測試 -->
    <!-- id連結該input name相同表示同一群組 value為按鈕的值 -->
    <div class="rdobutton">
        <input class="rdobutton_radio" type="radio" id="radioId" name="radioname" value="0" checked />
        <label class="rdobutton_label" for="radioId"></label>

        <input class="rdobutton_radio" type="radio" id="radioId2" name="radioname" value="1" />
        <label class="rdobutton_label" for="radioId2"></label>
    </div>


</body>

以上是Radio button和Checkbox在HTML部分的設定,接下來我們來準備加入CSS樣式設定吧!

單純放大按鈕寬高

想要單純放大的話,只需要在CSS中兩個按鈕的class給上寬高即可:

/* CSS */

.ckbutton_checkbox, .rdobutton_radio{
  width: 25px;
  height: 25px;
}

這時候我們就可以看到,按鈕確實變大顆了,不再是預設那種小到很難按的按鈕了!

設定寬高後放大版
設定寬高後放大版

自訂Radio button和Checkbox按鈕樣式

這時候如果還想要自訂一下不同的樣式,我們使用的是::before 和 ::after的方式來放checkbox裡面那個勾勾,::before為勾勾的左邊短邊;::after為勾勾的右邊長邊,

為了跟前面有所區別,我們把按鈕改綠色,並且垂直排列,那就話不多說直接上程式碼:

/* CSS */

/* *********************
    自製checkbox開始
********************* */
.ckbutton_label { /* 主外框 */
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: 2px solid #01790d;
    border-radius: 5px;
    -moz-transition: background-color 0.2s ease-in;
    -webkit-transition: background-color 0.2s ease-in;
    -o-transition: background-color 0.2s ease-in;
    transition: background-color 0.2s ease-in;
}

    .ckbutton_label::before, .ckbutton_label::after { /* 上面的打勾 */
        content: "";
        position: absolute;
        width: 5px;
        background-color: white;
        -moz-transition: opacity 0.2s ease-in;
        -webkit-transition: opacity 0.2s ease-in;
        -o-transition: opacity 0.2s ease-in;
        transition: opacity 0.2s ease-in;
        opacity: 0;
    }

    .ckbutton_label::before { /* 打勾左邊的線 */
        height: 11px;
        top: 13px;
        left: 7px;
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .ckbutton_label::after { /* 打勾右邊的線 */
        height: 16px;
        top: 6px;
        left: 16px;
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

.ckbutton_checkbox:checked + .ckbutton_label { /* 當check時 按鈕顏色改變 */
    background-color: #10bd2a;
}

    .ckbutton_checkbox:checked + .ckbutton_label::before,
    .ckbutton_checkbox:checked + .ckbutton_label::after { /* 當check時 打勾消失 */
        opacity: 1;
    }

.ckbutton_checkbox {
    display: none;
}

/* *********************
    自製checkbox結束
********************* */

/* *********************
    自製radiobox開始
********************* */

.rdobutton_label { /* 主外框 */
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: 2px solid #01790d;
    border-radius: 25px;
    -moz-transition: background-color 0.2s ease-in;
    -webkit-transition: background-color 0.2s ease-in;
    -o-transition: background-color 0.2s ease-in;
    transition: background-color 0.2s ease-in;
}

    .rdobutton_label::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 7px;
        width: 16px;
        height: 16px;
        background-color: white;
        border-radius: 25px;
        opacity: 0;
        -moz-transition: opacity 0.2s ease-in;
        -webkit-transition: opacity 0.2s ease-in;
        -o-transition: opacity 0.2s ease-in;
        transition: opacity 0.2s ease-in;
    }

input:checked + .rdobutton_label { /* 當check時 按鈕顏色改變 */
    background-color: #10bd2a;
}

.rdobutton_radio:checked + .rdobutton_label::before { /* 當check時 打勾消失 */
    opacity: 1;
}

.rdobutton_radio {
    display: none;
}

/* *********************
    自製radio結束
********************* */

透過自訂樣式,我們將Radio button和Checkbox的內容物都改成我們自己CSS產生的內容,這樣一來,自由度就提高非常多了,想要做成各種不同形狀都可以了!

而上面範例完成的樣子會顯示成下面這樣:

自訂樣式
自訂樣式

結論

這個小技巧是我在進職場時接觸的第一件事情,就是請我想辦法把按鈕變大顆,好讓公司產品系統可以好按一點,只是在按鈕放大後,就會開始請我把按鈕變成不同顏色、不同樣式,這時候就需要自訂CSS來讓按鈕產生不同的效果。

會選擇透過 ::before 和 ::after 的方式來讓我有很高的自由度可以修改成想要的模樣,原因是可以不用增加HTML標籤就能完成Checkbox那種勾勾,在實務上也是比較常見的作法,因為有時候配合的後端工程師可能是PHP或C#或ASP.NET你不知道,但如果能單靠CSS樣式檔就把內容改成對方想要的樣子,除了不用請對方加東加西以外,他們對你的能力也會更有信心噢!