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
再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow