分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
HTML+CSS 多选、单选框样式示例
1.使用clip:rect():
<
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
>
2.基本样式:
<
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"
>
3.CSS样式:
<
style
>
...
.mycheckbox{...}{position:absolute;clip: rect(6 17 17 6);}</style>
<input type=checkbox class='mycheckbox'> this is a Checkbox
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow
![这里写图片描述](https://i-blog.csdnimg.cn/blog_migrate/2e19ffb3303a490d20ea5d00dd397156.gif)