HTML+CSS 多选、单选框样式示例
1.使用clip:rect():
2.基本样式:
3.CSS样式:
<
body
>
this is a checkbox < input type ="checkbox" style ="position:absolute;clip:rect(5,14,14,5);background:red" id ="myCheckbox" >
< span style ="position:absolute;border:solid 1px blue;width:9px;height:9px;left:expression(myCheckbox.offsetLeft+5);top:expression(myCheckbox.offsetTop+5)" > <!-- --> </ span >
</ body >
this is a checkbox < input type ="checkbox" style ="position:absolute;clip:rect(5,14,14,5);background:red" id ="myCheckbox" >
< span style ="position:absolute;border:solid 1px blue;width:9px;height:9px;left:expression(myCheckbox.offsetLeft+5);top:expression(myCheckbox.offsetTop+5)" > <!-- --> </ span >
</ body >
<
br
>
单选和复选按钮的背景是红色的
<
br
>
< input type ="checkbox" name ="checkbox" value ="checkbox" style ="background-color: #FF0000;border:1px dashed lime;" >
< input type ="radio" name ="radiobutton" value ="radiobutton" style ="background-color: #FF0000" >
< input type ="checkbox" name ="checkbox" value ="checkbox" style ="background-color: #FF0000;border:1px dashed lime;" >
< input type ="radio" name ="radiobutton" value ="radiobutton" style ="background-color: #FF0000" >
<
style
>
.mycheckbox{position:absolute;clip: rect(6 17 17 6);}</style>
<input type=checkbox class='mycheckbox'> this is a Checkbox
<input type=checkbox class='mycheckbox'> this is a Checkbox