在页面编写的时候我们需要自定义radio样式,每个浏览器的渲染效果不一样,而且样式是系统默认的,不太美观,所以为了提高用户体验以及美观,我们需要对radio,chenckbox样式进行美化。
这里只选取radio进行样式编写,checkbox以此类推就ok了。
<form action="" method="post">
<input type="radio" name="sex" id="male" value="male">男
<input type="radio" name="sex" id="female" value="female">女
</form>
效果如下图所示
编写思路先说一下,起先把input浏览器渲染的按钮清除掉,采用display:none;然后给子元素添加label标签以至于提高用户体验点击按钮的时候可以关联到文字,这样不止点击按钮才可以选中,同时点击文字也可以选中。
<form action="" method="post">
<label for="male" class="main">
<input type="radio" name="sex" id="male" value="male">男
<span id="test"></span>
</label>
<label for="female" class="main">
<input type="radio" name="sex" id="female" value="female">女
<span id="test"></span>
</label>
</form>
.main{
display: inline-block;/*在一行显示,*/
}
.main input{
display: none;/*对.main input进行隐藏,用span.test来代替按钮,再进行样式编写*/
}
#test{
box-sizing: border-box;//告诉浏览器使用什么盒模型
position: relative;//进行定位
display: inline-block;//行内显示
width: 16px;
height: 16px;
border: 2px solid red;
border-radius: 50%;
float: left;//浮动,写到这一部按钮本来是在文字后面,左浮动使按钮在文字前面
margin: 4px 10px 0;
padding: 2px;//和background-clip是一起使用的,不知道background-clip: content-box;的同学去查一下什么意思
background-clip: content-box;
}
input:checked + span{//input:checked是选择每个被选中的 <input> 元素。+ span:选择紧接在 <input> 元素之后的所有 <span> 元素。
background: green;
}
最终效果图如下图所示
对于样式,同学们可自定义,如有写的不到位之处,还请见谅。