<分区>
我正在尝试用红色 X 替换表单上的复选框。基本上，我希望表单功能保持不变，但我不希望显示的是一个要检查的框，而是一个红色的 x点击。我不确定如何替换复选框图标。
标签 javascript html css
<分区>
我正在尝试用红色 X 替换表单上的复选框。基本上，我希望表单功能保持不变，但我不希望显示的是一个要检查的框，而是一个红色的 x点击。我不确定如何替换复选框图标。
最佳答案
您无法替换它，因为它是特定于浏览器的实现，您会注意到它在不同的浏览器中看起来不同。但是，只要稍加努力，您就可以编写自己的。一个简单的示例是创建以下 html 结构...
<div>
<span class="chk" unchecked></span>
<input type="checkbox" />
</div>
隐藏复选框并设置 span 的样式以按照您想要的方式...
.chk
{
display:inline-block;
width:13px;
height:13px;
border-radius: 3px;
padding:2px;
border:1px #ccc solid;
cursor:pointer;
}
.chk[checked]{
background:url(your-checked_image.png);
}
.chk[unchecked]{
background:url(your_own_image.png);
}
input[type=checkbox]
{
display:none;
}
然后，您需要与点击事件相交以更改背景图像、跟踪选中状态并切换复选框。请注意，您仍然需要该复选框，即使它是隐藏的，以防您需要使用表单标签提交某些状态。我使用 jQuery 完成所有这些工作，这让一切变得非常简单......
$(function(){
$('.chk').click(function(){
if($(this).attr('checked') == undefined)
{
$(this).attr('checked',"");
$(this).removeAttr('unchecked');
$('input[type=checkbox]').prop('checked', true);
}
else
{
$(this).removeAttr('checked');
$(this).attr('unchecked',"");
$('input[type=checkbox]').prop('checked', false);
}
});
});
我整理了一个 JS Fiddler你可以玩。
关于javascript - 用 X 替换 html 复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21592308/