純CSS將Radio button美化與開關型整理(上)

radio
radio

其實以一般的系統表單而言，普通的Radio button對使用者是最直覺的方式，通常會遇到的困難只有按鈕太小時，手機版會很難按到按鈕的問題，不過這點可以從我的另一篇文章獲得解決方式：
(延伸閱讀：Radio button和Checkbox放大並自訂樣式)

然而較常使用到開關型的地方，應該是在手機版許多的使用者設定頁面會看到，類似電源開關的ON和OFF按鈕。

因此這裡整理了幾種樣式給大家參考，上集先給大家一般基本樣式的程式碼，如果有想知道更多相關的變化型，可以再參考下集的教學噢！

那我們開始用程式碼教大家，用純CSS就能做到開關型Radio button吧！

純CSS製作橫向開關型Radio button

先分析一下，Radio button的開關型，可以分成左右移動的開關和上下移動的開關。

從最常見的型態先看看，最後呈現的結果會長這樣：

Radio button橫向開關型結果
Radio button橫向開關型結果

程式碼HTML如下：

<!-- HTML -->

<div class="cktoggle">
    <input type="checkbox" class="cktoggle_checkbox" id="cktoggle_id2" checked>

    <label class="cktoggle_label" for="cktoggle_id2">
        <span class="cktoggle_inner"></span>
        <span class="cktoggle_circle"></span>
    </label>
</div>

接著是CSS程式碼：

/* CSS */

/* ************************
    原始版本開始
************************ */

.cktoggle {
    position: absolute;
    width: 120px; /* 全按鈕寬度 */
    top: 50px;
    left: 50px;
}

/* 原按鈕樣式隱藏 */
.cktoggle_checkbox { 
    display: none;
}

/* 主外框 */
.cktoggle_label { 
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #156812;
    border-radius: 25px;
}

/* 背景 */
.cktoggle_inner { 
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

    /* 背景 */
    .cktoggle_inner:before, .cktoggle_inner:after { 
        display: block;
        float: left;
        width: 50%; /* before和after各佔50% */
        height: 40px; /* 全按鈕高度 */
        line-height: 42px; /* ON OFF文字高度 */
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    /* ON */
    .cktoggle_inner:before { 
        content: "ON";
        padding-left: 10px;
        background-color: #10b736;
        color: #FFFFFF;
    }

    /* OFF */
    .cktoggle_inner:after { 
        content: "OFF";
        padding-right: 10px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
    }

/* 上面的小圓 */
.cktoggle_circle { 
    display: block;
    width: 20px; /* 小圓寬度 */
    height: 20px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background: white;
    position: absolute;
    top: 9px; /* 距離上邊緣 左右是和一開始的位置有關 */
    right: 85px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
    border: 3px solid #1b9b39; /* 小圓外框顏色 */
    border-radius: 100px;
    transition: right 0.3s ease-in 0s;
}

/* label和背景的移動 */
.cktoggle_checkbox:checked + .cktoggle_label .cktoggle_inner { 
    margin-left: 0;
}

/* label和上面小圓的移動 */
.cktoggle_checkbox:checked + .cktoggle_label .cktoggle_circle { 
    right: 10px;
}

/* ************************
    原始版本結束
************************ */

純CSS製作縱向開關型Radio button

接下來，運用前一個橫向例子中相同的視覺樣式，只是從橫向變為縱向的程式寫法，最後呈現結果長這樣：

Radio button縱向開關型結果
Radio button縱向開關型結果

程式碼HTML如下：

<!-- HTML -->

<div class="cktoggle_vertical">
    <input type="checkbox" class="cktoggle_vertical_checkbox" id="cktoggle_vertical_id" checked>

    <label class="cktoggle_vertical_label" for="cktoggle_vertical_id">
        <span class="cktoggle_vertical_inner"></span>
        <span class="cktoggle_vertical_circle"></span>
    </label>
</div>

接著是CSS部分：

/* CSS */

/* ************************
    垂直版本開始
************************ */


.cktoggle_vertical {
    position: absolute;
    width: 40px; /* 全按鈕寬度 */
    top: 520px;
    left: 50px;
}

/* 原按鈕樣式隱藏 */
.cktoggle_vertical_checkbox { 
    display: none;
}

/* 主外框 */
.cktoggle_vertical_label { 
    display: block;
    overflow: hidden;
    width: 40px;
    height: 100px;
    cursor: pointer;
    border: 2px solid #156812;
    border-radius: 25px;
}

/* 背景 */
.cktoggle_vertical_inner { 
    display: block;
    height: 200%;
    margin-top: -100px;
    transition: margin 0.3s ease-in 0s;
}

/* 背景 */
.cktoggle_vertical_inner:before, .cktoggle_vertical_inner:after { 

        display: block;
        float: left;
        width: 100%; /* before和after各佔100% 多的部分float left 所以OFF在下方 */
        height: 50%; /* 全按鈕高度 */
        line-height: 42px; /* ON OFF文字高度 */
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    /* ON */
    .cktoggle_vertical_inner:before { 
        content: "OFF";
        padding-right: 3px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
    }

    /* OFF */
    .cktoggle_vertical_inner:after { 
        content: "ON";
        padding-left: 8px;
        padding-top: 60px;
        background-color: #10b736;
        color: #FFFFFF;
    }

/* 上面的小圓 */
.cktoggle_vertical_circle { 
    display: block;
    width: 20px; /* 小圓寬度 */
    height: 20px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background: white;
    position: absolute;
    top: 8px; /* unchecked時位置 */
    right: 5px; /* 小圓離右側距離 */
    border: 3px solid #1b9b39; /* 小圓外框顏色 */
    border-radius: 100px;
    transition: top 0.3s ease-in 0s;
}

/* label和背景的移動 */
.cktoggle_vertical_checkbox:checked + .cktoggle_vertical_label .cktoggle_vertical_inner { 
    margin-top: 0;
}

/* label和上面小圓的移動 */
.cktoggle_vertical_checkbox:checked + .cktoggle_vertical_label .cktoggle_vertical_circle { 
    top: 70px;
}

/* ************************
    垂直版本結束
************************ */

總結

如果是做系統的人，開關型按鈕可以讓使用者看到一整排需要操作的設定，比起單純看到兩顆Radio button來說，更直覺且質感提升不少，是個推薦的呈現方式噢！

把基本的橫向與縱向開關型按鈕看懂之後，我們再來進行下集的變化型。

變化型指的其實是樣式不同而已，相信如果橫向與縱向的程式能夠看懂並且懂得如何修改這些程式碼的話，我想下集的變化型肯定難不倒你的！

前往下集連結：
純CSS將Radio button美化與開關型整理(下)

標籤

為你推薦