Checkbox 样式

最新推荐文章于 2026-05-19 10:21:44 发布

转载最新推荐文章于 2026-05-19 10:21:44 发布 · 3.9k 阅读

收录于

HTML 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了三种不同的方式来实现网页中的Checkbox样式调整。第一种利用CSS表达式为复选框设置背景颜色；第二种采用内联样式调整Checkbox的位置及背景；第三种使用jQuery实现Checkbox功能增强。这些方法有助于改善用户体验并增加页面的美观度。

样式一：

<style type="text/css"> 
input
{
background-color:expression((this.type=="checkbox" ? "blue" : ""));
}
</style>
<BODY>
<TABLE id='tbl'>
<TR>
<TD><INPUT TYPE="text" NAME="aa" value="1">12</TD>
<TD><INPUT TYPE="text" NAME="bb" value="2">33</TD>
<TD><INPUT TYPE="checkbox" NAME="bb" class="RadioButton" value="2">33</TD>
<TD><INPUT TYPE="checkbox" NAME="bb" class="RadioButton" value="2">33</TD>
</TR>
</TABLE>
</BODY>

样式二：

<style>
* {margin:0;padding:0;}
</style>
<div style="background:#f60;width:13px;height:13px;margin:12px;">
<input type="checkbox" style="position:absolute;clip: rect(1 12 12 1);*clip: rect(5 16 16 5);*margin:-4px 0 0 -4px;" />
</div>

样式三：
运用jQuery checkbox，效果如下：