【input标签小圆点的改变】

input标签小圆点的改变

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

详细描述

截图

代码

body{margin:0;height:100%;}
ul{margin:0;}
button{border:0;outline: none;}
button:hover{outline: none;}
.fl{float: left;}
.fr{float:right;}
.clear{clear: both;}
html{font-size: 312.5%;}

@media screen and (max-width:767px) {
    .nav_ul{float: none!important;}
    .nav_ul li{padding-right:.3rem;}
    main{width: 100% !important;}
    .center{width:90%!important;}
    .xz_box {display: flex;
         flex-direction: column;
    }
    .subnav{margin: auto!important; }
    .ft-right{float: none !important;}
    .xz_box label{display:flex;}
}
@media screen and (min-width:768px){
    .flex-end{
        display: flex;
        justify-content: flex-end;
    }
    .xz_box {    display: flex;
        align-items: center;
        justify-content: flex-start;
        height:.4rem;
   }
  
}
@media screen and (min-width:1024px){ .ft-right{
    float: right;
}}

header{
    width:100%;
    background-color: #1d7ad9;
    height:.4rem;
}
header p{color:white;}
.center{width:62.5%;margin: 0 auto;}
.sign{
    display:inline-block;
    width:.8rem;
    height: 0.38rem;
    font-size: .16rem;
    background-color: #1d7ad9;
    border-left:0.2rem white soild;
    text-align: center;
    vertical-align:middle;
    color:white;
}
.sign:hover{
    width:1.6rem;
    color:#1d7ad9;
    background-color: white;
    border-left: 1px solid white;
    text-align: center;
    vertical-align: center;
}
.navbar-nav{margin:0;}
.nav button{
    width: 100%;
    font-size:.16rem;
    padding:.1rem;
    line-height: 15px;
    vertical-align: center;
    background-color: white;
    border:1px solid #e1e5e7;
    border-radius:5px;
}
.nav_ul button:hover{
    background-color:#1d7ad9;
}
.nav_ul {
    float:right;
    padding-right: none;
}
.nav_ul li{
   padding-left:.3rem;
}
.navbar-collapse{
    padding:0;
    line-height:1rem;
    vertical-align: middle;
}
.yuan{
    position:absolute;
    top:-.15rem;
    left:50%;
    display: block;
    border-radius: 50%;
    width:.3rem;
    line-height:.3rem;
    text-align: center;
    transform:translate(-50%,0);
    background-color: #d4d4d4;
    color: white;
}
.subnav{
    position: relative;
    border-top:.06rem solid #d4d4d4;
    width:1.4rem;
    height:1rem;
    font-size: .18rem;
    color:#CCC;
}

.subnav p{
    text-align: center;
    height:1rem;
    line-height: 1rem;
    vertical-align: middle;
}
.subnav:hover{
    border-top:.06rem solid #f1a750;
    color: #f1a750;
}
.subnav:hover  .yuan{
background-color: #f1a750;
}
.navfont{
    font-size: .22rem;
    color:#333;
}
.Vertical{
    margin-right:.06rem;
  height: .22rem;
  border-left:.04rem  #1D7AD9 solid;
  }

  .table_nav{
    width: 100%;
    height:.46rem;
    font-size: .18rem;
    line-height:.46rem;
    vertical-align: center;
    background-color:#E6E6E6;
    color: #1d7ad9;
    border: 1px #E8E8E8 solid;
}
.box{
    width:.18rem;
    height:.14rem;
    margin:0 .18rem;
}
.sel {
    border:.02rem solid  #E8E8E8;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url("./images/xl.png") no-repeat scroll right  transparent;
    padding: .1rem .5rem .1rem .1rem;
    font-size:.14rem;
    position: absolute;
    top:50%;
    right:.2rem;
    transform:translate(0,-50%);
    color:#999;
}
.table-main{
    position: relative;
    background-color: #FBFCFF;
    padding:.36rem .2rem;
    border: 1px #E8E8E8 solid;
}
.table-input{
    margin: 0 .16rem;
    width:.7rem;
    height:.3rem;
}
form span{
    margin-left: .1rem;
    font-size: .18rem;
    color:#666;
}
.xz_box input{margin:0;}
.xz_box label{display:flex;margin:0;align-items: center;font-weight: normal;font-size: .16rem;}
.option-radio{
    opacity: 0;
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}
.pay_list_c1 {
    width: .32rem;
    height:.32rem;
    cursor: pointer;
    background-image: url(images/nocheack.png);
    background-repeat: no-repeat;
    background-position: -24px 0;
    }
    .on {
background-position: 0 0;
        }
        .pay_list_c1:hover{ background-image: url(images/input.png);}
.main_btn{
    display:flex;
    justify-content:center;
    align-items:center;
    height:2.86rem;
    border: 1px #f1f1f1 solid;
}
.main_btn button{
    width: 1.8rem;
    height:.46rem;
    font-size:.24rem;
    background-color: #e15053;
    color:white;
    border-radius:2px;
}
footer{
    margin-top: 1.2rem;
    position: relative;;
    bottom:0;
    width: 100%;
    background-color:#e1e5e7;
    font-size: .16rem;
}
footer a{
    color:#a8a8a8;
}
.footer_box {
    margin:.6rem 0;
    line-height:.16rem;
    text-align:left;
    color:#a8a8a8;
}
.footer_bottom{
    width: 100%;
    font-size: .14rem;
    background-color: #1d7ad9;
    text-align: center;
    color: white;
}
.erweima{
    float:right;
    width:.92rem;
    height:.92rem;
}
.ft-right{
    width:3.5rem;
}

编辑于2024-04-13

时间排序

热门排序

[北京|结业弟子]JS-顾仁鹏
1

<div class="col-sm-2 box-style">
<span>
<input type="radio" name="style" value="style1" id="1"> 对口箱
<label for="1"></label>
</span>
</div>
css部分：
.box-style span{
padding-left: 15px;
}
.box-style input{
opacity: 0;
}
.box-style label{
display : inline-block;
width : 13px;
height : 13px;
border-radius: 50%;
position : absolute;
left : 30.5px;
top : 30px;
border : 1px solid #b6b6b6;
background : #e4e4e4;
}
.box-size label{
display : inline-block;
width : 13px;
height : 13px;
border-radius: 50%;
position : absolute;
left : 30.5px;
top : 30px;
border : 1px solid #b6b6b6;
background : #e4e4e4;
}
input[type="radio"]:checked+label {
background-color: #1d7ad9;
border : 1px solid #1d7ad9;
}
input[type="radio"]:checked + label::after{
position : absolute;
display : inline-block;
width : 5px;
height : 5px;
border-radius : 50%;
top : 2.5px;
left : 3px;
content : "";
background-color: #fff;
}
其实原理就是用label覆盖掉默认的圆圈，当点击时label变成蓝色，然后用：：after伪元素添加一个圆点。所以不是改样式，就是重新写了一个。

查看全部>

编辑于2018-12-21

去第页