发表于: 2016-06-19 18:38:36

1 1315


关于添加单选按钮样式的方法。(添加背景图片)。

html文件

<body>

     <div class="wrap">

           <h4>radio</h4>

           <div class="single">

               <input type="radio" class="radio-logo" id=r1 name="radio" value="option1"/>

               <label for="r1"> the one </label>

          </div>

          <div class="single">

              <input type="radio" class="radio-logo" id=r2 name="radio" value="option2"/>

              <label for="r2"> the two </label>

            </div>

    </div>

</body>

*********************************************************************************************css

<style>

     .single{

                 height:30px;

                 font-size:18px;

                 border:1px solid red;

                 color:blue;

                }

    .radio-logo{

                       position:absolute;

                       display:none;

                      }//弃掉默认样式并左对齐。

  .radio-logo+label{

                      position:relative;

                      padding-left:30px;

                      vertical-align:middle;

                      }

.radio-logo+label::before{

                                         position:absolute;

                                         top:0;

                                         left:0;

                                         width:20px;

                                          height:20px;

                                          content:url(https://github.com/sizee/Custom-box/blob/master/%E5%AE%9A%E5%88%B6%E7%AE%B1---circle.png);

                                          border:1px solid red;

                                         }

.radio-logo:checked+label::before{

                                          content:url(https://github.com/sizee/Custom-box/blob/master/%E5%AE%9A%E5%88%B6%E7%AE%B1---circleblue.png);

                                       }

</style>

*********************************************************************************************

把代码放入自己的html文件中注意空格以及图片的地址。可以用自己的图片。这里的图片地址有可能加载不出来。

本显示是垂直排列的,如过想水平排列,可以在single里面加上“display:inline-block;”或弄个左右浮动。

如过不用背景图片 也可在相应得类中取消图片换成自己绘制的图形。


返回列表 返回列表
评论

    分享到