純CSS實(shí)現(xiàn)扁平化風(fēng)格開關(guān)按鈕

chuyao 發(fā)布于2019-06-27 14:02 / 1558人閱讀

摘要：開關(guān)樣式預(yù)覽圖前言最近在基于框架開發(fā)一個網(wǎng)站，在填寫表單一項(xiàng)需要用戶填寫是否選擇某一選項(xiàng)，本來想引用框架自帶的一個按鈕插件，結(jié)果在引用的時候總是出錯，就找了找資源，用純實(shí)現(xiàn)這個按鈕開關(guān)的功能。

開關(guān)樣式預(yù)覽圖 前言

最近在基于bootstrap框架開發(fā)一個網(wǎng)站，在填寫表單一項(xiàng)需要用戶填寫是否選擇某一選項(xiàng)，本來想引用bootstrap框架自帶的一個按鈕插件，結(jié)果在引用js的時候總是出錯，就找了找資源，用純css實(shí)現(xiàn)這個按鈕開關(guān)的功能。

具體代碼過程

話不多說，直接上代碼實(shí)現(xiàn)！

html代碼部分


        是否選擇：

css代碼部分

input[type=checkbox] {
    visibility: hidden;
}
.checkbox {
    width: 120px;
    height: 30px;
    background: #FFF;
    margin: 1px 1px;
 
    border-radius: 10px;
    position: relative;
}

.checkbox:before {
    content: "是";
    position: absolute;
    top: 12px;
    left: 16px;
    height: 2px;
    /*color: #26ca28;*/
    color: #4baa34;
    font-size: 16px;
    /*font-weight:bold;*/
}
.checkbox:after {
    content: "否";
    position: absolute;
    top: 12px;
    left: 80px;
    height: 2px;
    color: #ffffd;
    font-size: 16px;
    /*font-weight:bold;*/
}
.checkbox label {
    display: block;
    width: 40px;
    height: 22px;
    border-radius: 50px;
 
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 9px;
    z-index: 1;
    left: 12px;
    background: #ffffd;
}
 
.checkbox input[type=checkbox]:checked + label {
    left: 62px;
    /*background: #26ca28;*/
    background: #4baa34;
}

js代碼部分

 if ($("#isnot").attr("checked")) {var isnot=1}else{var isnot=0};

通過jq獲取按鈕是否被選中的值，ajax傳給后臺php進(jìn)行數(shù)據(jù)的處理，完成數(shù)據(jù)庫的操作
jq獲取按鈕是否被選中的值

小結(jié)

一點(diǎn)小心得，自己開發(fā)時間不長，感覺在開發(fā)過程中最怕遇到一時半會解決不了的問題，尤其還有新的知識點(diǎn)需要掌握的時候，比如這個問題，在js代碼和關(guān)于bootstrap框架js引入的，和bootstrap摸態(tài)框的處理機(jī)制上費(fèi)了很多功夫，最后也不是很明白，導(dǎo)致這個功能一直沒有實(shí)現(xiàn)，最后在網(wǎng)上查了相關(guān)信息和代碼，決定直接繞過js,用純的css來實(shí)現(xiàn)，最后只是引入了css，少引入了框架里的幾個js,既解決了問題，也提高了代碼的執(zhí)行效率。