自定义单选框样式

来源：互联网发布：youtube翻墙软件2015 编辑：程序博客网时间：2024/06/01 10:44

<div class="user_sex">            <p class="user_sex_span">性别</p>            <div class="sex">              <div class="women">                  <label for="women">女</label>                  <input type="radio" name="fruit" id="women" />                  <div class="user-defined">                      <span class="circle active"></span>                  </div>              </div>              <div class="man">                  <label for="man">男</label>                  <input type="radio" name="fruit" id="man" />                  <div class="user-defined">                      <span class="circle"></span>                  </div>              </div>            </div>          </div>

/*性别单选框*/input{padding: 0; margin: 0; border: 0;outline: none;}.sex:before { content: ""; display: table; }.sex:after { content: ""; display: table; clear: both; }.sex > div { position: relative; float: left;width:50px; height: 35px; line-height:35px; }.sex > div:last-child { margin-right: 0; }.sex label { display: block; width: 50px; height:35px; line-height: 35px; cursor: pointer;position: absolute;left: 20px}.sex input { z-index: 3; display: block; opacity: 0; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; width:12px; height:12px; cursor: pointer; }.sex .user-defined { z-index: 2; position: absolute; top: 0; bottom: 0; left:0px; margin: auto; width:12px; height: 12px; border: 1px solid #f2572c; border-radius: 50%; cursor: pointer; }.sex .user-defined span.circle  { display: block; width: 8px; height: 8px; margin-top:2px; margin-left: 2px; background-color: transparent; border-radius: 50%; }.sex .user-defined span.active  { background-color: #f2572c; }/*性别单选框*/

    //单选按钮    $(".women").on("click",function() {    $(".user-defined>span",this).addClass("active");    $(this).next().children().last().children().removeClass("active");});$(".man").on("click",function() {    $(".user-defined>span",this).addClass("active");    $(this).prev().children().last().children().removeClass("active");});

阅读全文

0 0