更改checkbox效果

pubaolin 2009-12-07 04:43:43

checkbox的默认被选中效果是在框里画了个钩,我想用JS把它改成一个全黑的框,有什么办法?

...全文

87 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

yixianggao 2009-12-07

打赏
举报

[Quote=引用 5 楼 pubaolin 的回复:]
不错,呵呵
能不能让黑框的大小和checkbox内框大小一样?给人的感觉就像把框内涂成了黑色
[/Quote]

IE 7 下可以达到 lz 要求，FF 行不通！
不过 margin-top 居然是 -22px 才能达到效果，太诡异了！

写着玩吧！

L@_@K

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> new document </title>

  <meta name="generator" content="editplus" />

  <meta name="author" content="" />

  <meta name="keywords" content="" />

  <meta name="description" content="" />

 </head>



 <body>

	<div style="width: 12px; height: 12px; border: solid 0px red; overflow: hidden; margin-bottom: 5px;">

		<input type="checkbox" id="iptChk1" style="margin: -22px 0px 0px -4px;" />

	</div>

	<div style="width: 12px; height: 12px; border: solid 0px red; overflow: hidden; margin-bottom: 5px;">

		<input type="checkbox" id="iptChk2" style="margin: -22px 0px 0px -4px;" />

	</div>

  <script type="text/javascript">

  <!--

var chk = document.getElementById("iptChk1");

chk.onclick = function() {

	if (this.checked)

	{

		this.style.border = "solid 10px black";

	}

	else

	{

		this.style.border = "solid 0px black";

	}

};

  //-->

  </script>

 </body>

</html>

pubaolin 2009-12-07

打赏
举报

不错,呵呵
能不能让黑框的大小和checkbox内框大小一样?给人的感觉就像把框内涂成了黑色

xiuyouxu 2009-12-07

打赏
举报

[Quote=引用 3 楼 yixianggao 的回复:]
IE 下可以这么玩，FF 下不行，可以考虑用 div 遮罩实现

L@_@K
HTML code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title> new document</title><metaname="generator" content="editplus"/><metaname="author" content=""/><metaname="keywords" content=""/><metaname="description" content=""/></head><body><inputtype="checkbox" id="iptChk1"/><inputtype="checkbox" id="iptChk2"/><scripttype="text/javascript"></script></body></html>
[/Quote]
up

yixianggao 2009-12-07

打赏
举报

IE 下可以这么玩，FF 下不行，可以考虑用 div 遮罩实现

L@_@K

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title> new document </title>

  <meta name="generator" content="editplus" />

  <meta name="author" content="" />

  <meta name="keywords" content="" />

  <meta name="description" content="" />

 </head>



 <body>

  <input type="checkbox" id="iptChk1" />

  <input type="checkbox" id="iptChk2" />

  <script type="text/javascript">

  <!--

var chk = document.getElementById("iptChk1");

chk.onclick = function() {

	if (this.checked)

	{

		this.style.border = "solid 10px black";

	}

	else

	{

		this.style.border = "solid 0px black";

	}

};

  //-->

  </script>

 </body>

</html>

pubaolin 2009-12-07

打赏
举报

[Quote=引用 1 楼 sohighthesky 的回复:]
用2张图片，勾选和未勾选
将checkbox样式CSS code style="filter:alpha(opacity=0);opacity:0"
[/Quote]
不明白,给个完整代码行吗

sohighthesky 2009-12-07

打赏
举报

用2张图片，勾选和未勾选
将checkbox样式

 style="filter:alpha(opacity=0);opacity:0"

由于需要个性化checkbox的点击事件，不得以...效果图： tip:需要用到jquery,注意导入。 checkbox.js $(function() { //activeCheckBox(); activeCheckBoxBySelector(, addSpan

1.带领您深入学习QT5/C++：QML常用控件编程、QML的多媒体入门、逐步提升Qml编程水平。2.所有章节均有理论知识介绍、接口讲解、实例代码讲解，讲解过程中不断穿插老师在开发过程中遇到的问题及解决方法（可以下载所有...

有时候需要显示一些复选框（checkbox），表明这个地方是可以进行勾选操作的，但是有时候是只想告知用户”这个地方是可以进行勾选操作的”而不想让用户在此处勾选（比如在信息展示页面），这时候就需要将复选框设置成...

Datagridview控件没有全选或取消全选的复选框，本资源用VB2015通过扩展DataGridViewColumnHeaderCell类，在列头绘制一个复选框checkbox控件，通过定义checkbox鼠标单击事件来...checkbox还可以实现中间态，效果非常好！

JavaScript

87,907

社区成员

224,615

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章