主页»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群:凯发娱乐官网官方群(515171538),验证音讯:10000
微信群:加小编微信 849023636 邀请您参加,验证音讯:10000
提示:更多精彩内容重视微信大众号:全栈开发者中心(fsder-com)
css
网友谈论(共0条谈论) 正在载入谈论......
沉着谈论文明上网,回绝歹意咒骂 宣布谈论 / 共0条谈论
登录会员中心