首頁»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條評論
登錄會員中心
大发国际网址 阜平县| 阿巴嘎旗| 建德市| 盐池县| 明光市| 原平市| 宝清县| 怀集县| 土默特左旗| 阿克陶县| 资阳市| 克什克腾旗| 滕州市| 色达县| 河津市| 方城县| 洛川县| 泾川县| 邵阳市| 东丽区| 琼海市| 建湖县| 齐齐哈尔市| 增城市| 郁南县| 灵璧县| 宁晋县| 周宁县| 宜州市| 湘乡市| 西城区| 古田县| 广安市| 大城县| 铁力市| 汉阴县| 济南市| 玉屏| 大田县| 宿迁市| 普宁市| 马龙县| 元阳县| 新乐市| 长垣县| 武川县| 多伦县| 旺苍县| 海丰县| 安新县| 雷州市| 德兴市| 达孜县| 阜新| 北宁市| 衡阳市| 沙湾县| 卫辉市| 巢湖市| 陆良县| 洛南县| 牙克石市| 东莞市| 武陟县| 潮安县| 博白县| 根河市| 磐石市| 洱源县| 文水县| 邮箱| 南华县| 黄冈市| 盐源县| 黔西县| 渑池县| 凉山| 柘荣县| 连山| 孙吴县| 贵阳市| 三江| 玉树县| 宁都县| 宜昌市| 象山县| 乌海市| 安远县| 榕江县| 双桥区| 昌黎县| 韶关市| 象山县| 灵台县| 沁阳市| 丰台区| 扬中市| 江口县| 娄烦县| 额尔古纳市| 牙克石市| 义马市| 沙湾县| 墨竹工卡县| 沁阳市| 镇巴县| 金堂县| 沭阳县| 岱山县| 青河县| 闸北区| 怀仁县| 阳新县| 榕江县| 安阳市| 建宁县| 开平市| 隆回县| 乃东县| 阿拉善左旗| 景德镇市| 什邡市| 抚宁县| 定西市| 定远县| 潢川县| 通化县| 钟祥市| 阜康市| 高雄市| 云梦县| 临洮县| 岫岩| 宁化县| 凤庆县| 林口县| 乡宁县|