純CSS實現扁平化風格開關按鈕

nanfeiyan 發布于2019-08-29 10:57 / 1644人閱讀

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

開關樣式預覽圖 前言

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

具體代碼過程

話不多說，直接上代碼實現！

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進行數據的處理，完成數據庫的操作
jq獲取按鈕是否被選中的值

小結

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

GPU云服務器云服務器純CSS 服務器上的直按鈕開關 html 按鈕css html實現透明按鈕

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111326.html

純CSS實現扁平化風格開關按鈕

摘要：開關樣式預覽圖前言最近在基于框架開發一個網站，在填寫表單一項需要用戶填寫是否選擇某一選項，本來想引用框架自帶的一個按鈕插件，結果在引用的時候總是出錯，就找了找資源，用純實現這個按鈕開關的功能。開關樣式預覽圖 showImg(https://segmentfault.com/img/bVyYer); 前言最近在基于bootstrap框架開發一個網站，在填寫表單一項需要用戶填寫是否選擇...

lewinlee 2019-08-19 18:45 評論0 收藏0
純CSS實現扁平化風格開關按鈕

摘要：開關樣式預覽圖前言最近在基于框架開發一個網站，在填寫表單一項需要用戶填寫是否選擇某一選項，本來想引用框架自帶的一個按鈕插件，結果在引用的時候總是出錯，就找了找資源，用純實現這個按鈕開關的功能。開關樣式預覽圖 showImg(https://segmentfault.com/img/bVyYer); 前言最近在基于bootstrap框架開發一個網站，在填寫表單一項需要用戶填寫是否選擇...

lidashuang 2019-08-01 15:26 評論0 收藏0
純CSS實現扁平化風格開關按鈕

摘要：開關樣式預覽圖前言最近在基于框架開發一個網站，在填寫表單一項需要用戶填寫是否選擇某一選項，本來想引用框架自帶的一個按鈕插件，結果在引用的時候總是出錯，就找了找資源，用純實現這個按鈕開關的功能。開關樣式預覽圖 showImg(https://segmentfault.com/img/bVyYer); 前言最近在基于bootstrap框架開發一個網站，在填寫表單一項需要用戶填寫是否選擇...

chuyao 2019-06-27 14:02 評論0 收藏0
CSS開關按鈕三例

摘要：我們將使用純打造一些切換開關并使其擁有類似于的用戶體驗。總結這是一個關于一些很好的切換開關示例這種技術使得一切完全復合語義，不會增加任何瘋狂的標記，并且用純就可以完成。獲取開關按鈕代碼可以我們將使用純CSS打造一些切換開關并使其擁有類似于checkbox的用戶體驗。很多時候我們都需要用戶通過勾選/取消checkbox來表明他們對一些問題的答案。我們設置了一個標簽，一個checkbo...

ivan_qhz 2019-08-30 11:03 評論0 收藏0
CSS開關按鈕三例

摘要：我們將使用純打造一些切換開關并使其擁有類似于的用戶體驗。總結這是一個關于一些很好的切換開關示例這種技術使得一切完全復合語義，不會增加任何瘋狂的標記，并且用純就可以完成。獲取開關按鈕代碼可以我們將使用純CSS打造一些切換開關并使其擁有類似于checkbox的用戶體驗。很多時候我們都需要用戶通過勾選/取消checkbox來表明他們對一些問題的答案。我們設置了一個標簽，一個checkbo...

longmon 2019-08-02 15:13 評論0 收藏0