1、首先打开编辑器,然后新建一个html文件,编写入基本的框架。
2、然后用form,input和label创建一个单项选择题。
3、创建一个新的css文件,并且用link标签关联HTML文件。
4、然后撤销一下原来按钮的样式。
nput[type="radio"] {
display: none
}
5、nput[type='radio'] + label:before{
content: ""
display: inline-block
width: 20px
height: 20px
border: 2px solid gold
}
首先设置未点击的单选框样式,用border来设置颜色。
6、nput[type='radio']:checked + label:before{
background-color: red
}
接着设置点击后的背景颜色,这里用background-color。
7、最后运行一下,完成效果图。
一、当文字14px左右大小时,对齐良好二、当文字12px左右大小时,文字的位置就偏下了,火狐浏览器和谷歌浏览器下尤为明显,有以下几种方法解决这问题:
1、单(复)选框设置vertical-align:text-bottommargin-bottom:2px
*margin-bottom:-2px
2、单(复)选框设置height:13pxvertical-align:text-topmargin-top:0
3、单(复)选框设置height:15pxvertical-align:bottommargin-bottom:3px
margin-top:-1px
4、单(复)选框设置height:14pxvertical-align:top样式后的表现,chrome谷歌浏览器下文字稍微偏上
5、单(复)选框设置vertical-align:middlemargin-top:-2pxmargin-bottom:1px
用label,例如:
.add_cart_radio{float:left
margin-top:0.5em
margin-right:0.5em
}
.add_cart_radio input[type="radio"]{
display:none
}
.add_cart_radio input[type="radio"] + label{
padding:0.2em 1em
border:1px solid #CCCCCC
border-radius:0.5em
color:#999
}
.add_cart_radio input[type="radio"]:checked + label{
padding:0.2em 1em
border:1px solid #FF6600
border-radius:0.5em
background:#FF6600
color:#FFFFFF
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)