html中的input标签的type属性checkbox和radio是网页常用的属性,不过它们默认样式不怎么好看,而且不同浏览器显示的效果也不一样,为了统一样式,我们对这二个属性值进行美化装饰下。
实例代码
checkbox元素美化:
<style>
label{
font-size: 14px;
height: 25px;
line-height: 25px;
box-sizing: border-box;
margin-right: 20px;
}
input[type="checkbox"]
{
display: none;
}
/*定义 checkbox 元素相邻元素 span 样式*/
input[type="checkbox"] + span
{
display: inline-block;
position: relative;
border: 1px solid #99a1a7;
width: 15px;
height: 15px;
line-height: 15px;
border-radius: 4px;
overflow: hidden;
box-sizing: border-box;
margin: 0 5px 0 0;
}
/*定义 checkbox 元素相邻元素 span 样式伪类的样式*/
input[type="checkbox"]:checked + span:after
{
content: '\2714'; /*如果想更好看一点,这里可以使用一亲图片或字体标等来美化一下选择效果*/
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
font-size: 14px;
color: green;
width: 15px;
height: 15px;
line-height: 15px;
text-align: center;
}
</style>
<label>
<input type="checkbox" name="" id="">
<span></span>老翰
</label>
<label>
<input type="checkbox" name="" id="">
<span></span>小翰
</label>
radio元素美化:
<style>
label{
font-size: 14px;
height: 25px;
line-height: 25px;
box-sizing: border-box;
margin-right: 20px;
}
input[type="radio"]
{
display: none;
}
/*定义 radio 元素相邻元素 span 样式*/
input[type="radio"] + span
{
display: inline-block;
position: relative;
border: 1px solid #99a1a7;
width: 15px;
height: 15px;
line-height: 15px;
border-radius: 50%;
overflow: hidden;
box-sizing: border-box;
margin: 0 5px 0 0;
}
/*定义 radio 元素相邻元素 span 样式伪类的样式*/
input[type="radio"]:checked + span{
border:1px solid green;
}
input[type="radio"]:checked + span:after
{
content: ' ';
box-sizing: border-box;
position: absolute;
left: 2px;
top: 2px;
width: 9px;
height: 9px;
background-color: green;
border-radius: 50%;
}
</style>
<label>
<input type="radio" name="host" >
<span></span>老翰
</label>
<label>
<input type="radio" name="host" >
<span></span>小翰
</label>
以上纯CSS代码实现的checkbox和radio元素美化,原理就是只需要隐藏掉选择元素,并使用css中的相邻兄弟选择器,来控制下一个兄弟元素即可。
广告插入