賺錢方法學生推薦 - 折扣碼優惠、排行比價

Radio button和Checkbox放大並自訂樣式

賺錢方法學生推薦 - 折扣碼優惠、排行比價

checkbox
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樣式檔就把內容改成對方想要的樣子，除了不用請對方加東加西以外，他們對你的能力也會更有信心噢！

Tags

為你推薦