首頁»HTML/CSS»總結:如何修改美化radio、checkbox的默認樣式

                    總結:如何修改美化radio、checkbox的默認樣式

                    來源:菜鳥妹子 發布時間:2018-12-01 閱讀次數:

                      現在前端頁面效果日益豐富,默認的input組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求,在此特地整理下修改radio、CheckBox樣式的方法。

                      原理:大致原理都是使用原生的checkbox或input標簽,在其后面設置相關聯的label元素。給<input>元素設置為透明,然后通過定位讓用戶看到的是<label>元素,利用css的原生屬性來判斷用戶的操作,設置選中后的label樣式,即 input[type=checkbox]:checked+label{}

                     利用css3偽元素實現樣式修改

                      html代碼 

                       <p>您的性別:</p>
                        <div class="radio-sex">
                            <input type="radio" id="sex1" name="sex">
                            <label for="sex1"></label>
                            <span>男</span>
                        </div>
                        <div class="radio-sex">
                            <input type="radio" id="sex2" name="sex">
                            <label for="sex2"></label> 女
                        </div>

                      css樣式

                    .radio-sex {
                        position: relative;
                        display: inline-block;
                        margin-right: 12px;
                    }
                    
                    .radio-sex input {
                        vertical-align: middle;
                        margin-top: -2px;
                        margin-bottom: 1px;
                        /* 前面三行代碼是為了讓radio單選按鈕與文字對齊 */
                        width: 20px;
                        height: 20px;
                        appearance: none;/*清楚默認樣式*/
                        -webkit-appearance: none;
                        opacity: 0;
                        outline: none;
                        /* 注意不能設置為display:none*/
                    }
                    
                    .radio-sex label {
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: -1;
                        /*注意層級關系,如果不把label層級設為最低,會遮擋住input而不能單選*/
                        width: 20px;
                        height: 20px;
                        border: 1px solid #3582E9;
                        border-radius: 100%;
                    }
                    
                    .radio-sex input:checked+label {
                        background: #3582E9;
                    }
                    
                    .radio-sex input:checked+label::after {
                        content: "";
                        position: absolute;
                        left: 8px;
                        top: 2px;
                        width: 5px;
                        height: 12px;
                        border-right: 1px solid #fff;
                        border-bottom: 1px solid #fff;
                        transform: rotate(45deg);
                    }

                      優點:充分借助了CSS3的優勢,無需使用js和圖片,僅用純CSS3就可搞定

                      缺點:兼容性較差,僅支持IE9+

                      案例:

                     利用圖片實現樣式修改

                      實現思路

                      1.設置input 屬性hidden對該input進行隱藏

                    <input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>

                      2.借助label for標簽通過id綁定input ,這樣在點擊label時實際就是點擊了input

                    <input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
                                    <label for="adviceRadio1" class="advice"></label>

                      3.定義label的樣式,設置未選中狀態的背景圖 

                    .advice{
                                        height: 12px;
                                        width: 12px;
                                        display: inline-block;
                                        background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png');
                                        background-repeat: no-repeat;
                                        background-position: center;
                                        vertical-align: middle;
                                        margin-top: -4px;
                                    }

                      4.使用相鄰選擇器設置選中狀態label的樣式

                    input[type="radio"]:checked + .advice{
                                        background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');
                                    }

                      以上是radio單選框的實現代碼,checkbox也是類似 將input type定義成checkbox即可

                     利用插件實現

                      awesome-bootstrap-checkbox插件

                      awesome-bootstrap-checkbox是一款可以美化Bootstrap復選框和單選按鈕的插件。它使用純CSS編寫,沒有任何的javascript文件。它通過在原生Bootstrap組件的基礎上做一些小改動,即可完成漂亮的美化效果。

                      演示地址:http://awesome-bootstrap-chec...

                      插件下載:https://www.bootcdn.cn/awesom...

                      注:需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome對應的字體font文件

                      pretty.css

                      pretty.css是一款純css3漂亮的checkbox和radio美化效果。pretty.css可以和多種字體圖標結合使用,對原生的checkbox和radio進行美化,還可以制作按鈕點擊時的動畫效果。

                      演示地址:http://www.htmleaf.com/Demo/2...

                      插件下載:https://www.bootcdn.cn/pretty...

                      小編知道的方法先介紹到這里,大家如有更好的方法歡迎留言討論。

                    QQ群:WEB開發者官方群(515171538),驗證消息:10000
                    微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
                    提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
                    css
                    網友評論(共0條評論) 正在載入評論......
                    理智評論文明上網,拒絕惡意謾罵 發表評論 / 共0條評論
                    登錄會員中心
                    福彩试机号今天