<sub id="rrh1b"><menuitem id="rrh1b"></menuitem></sub>

    <th id="rrh1b"><address id="rrh1b"><dfn id="rrh1b"></dfn></address></th><th id="rrh1b"></th>

    <th id="rrh1b"></th>

    <sub id="rrh1b"></sub>

        <sub id="rrh1b"><meter id="rrh1b"></meter></sub>
        <address id="rrh1b"><menuitem id="rrh1b"><font id="rrh1b"></font></menuitem></address>

          首页»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;
              /* 前面三?#20889;?#30721;是为了让radio单选按钮与文字?#20113;?*/
              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和?#35745;?#20165;用纯CSS3就可搞定

            缺点:兼容性较差,仅支持IE9+

            案例:

           利用?#35745;?#23454;现样式修改

            实现思路

            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
          微信群:?#26377;?#32534;微信 849023636 邀请您加入,验证消息:10000
          提示:更多精彩内容关注微信公众号:全栈开发者中?#27169;╢sder-com)
          css
          网友评论(共0条评论) 正在载入评论......
          理智评论文明上网,拒绝恶意谩骂 发表评论 / 共0条评论
          登录会员中心
          彩运

            <sub id="rrh1b"><menuitem id="rrh1b"></menuitem></sub>

            <th id="rrh1b"><address id="rrh1b"><dfn id="rrh1b"></dfn></address></th><th id="rrh1b"></th>

            <th id="rrh1b"></th>

            <sub id="rrh1b"></sub>

                <sub id="rrh1b"><meter id="rrh1b"></meter></sub>
                <address id="rrh1b"><menuitem id="rrh1b"><font id="rrh1b"></font></menuitem></address>

                    <sub id="rrh1b"><menuitem id="rrh1b"></menuitem></sub>

                    <th id="rrh1b"><address id="rrh1b"><dfn id="rrh1b"></dfn></address></th><th id="rrh1b"></th>

                    <th id="rrh1b"></th>

                    <sub id="rrh1b"></sub>

                        <sub id="rrh1b"><meter id="rrh1b"></meter></sub>
                        <address id="rrh1b"><menuitem id="rrh1b"><font id="rrh1b"></font></menuitem></address>

                          彩票七乐彩走势图 喜来登娱乐城优惠活动 快乐8app 新11选5是不是骗局 宁夏11选5走势图新 白小姐—马期期准 双色球综合分布图 江苏快三跨度走势图 秒速时时彩彩走势图 吉林11选5开奖结果查 吉林快3今天走势 杀平特1肖公式规律147 平码公式规律 彩票中奖不捐款死亡 河南快3开奖基本走势