[英]Styling Checkbox
I am trying to insert an image instead of a check on the check box. 我正在尝试插入图像,而不是选中复选框。 The code that am using is: 使用的代码是:
<html>
<head>
<style>
.bl {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), color-stop(0.5, #7da4bf), color-stop(3, #9fbed3));
width: 90%;
height:30px;
border-radius: 5px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
margin-bottom:10px;
}
p
{
font-family:"Times New Roman";
font-size:10px;
}
checkbox
{
width: 75px;
height: 75px;
padding: 0 5px 0 0;
background: url(images/Green_tick.png) no-repeat;
display: block;
clear: left;
float: left;
}
.checked {
position: absolute;
width: 200px;
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial,sans-serif;
background: url(images/Green_tick.png) no-repeat;
overflow: hidden;
}
</style>
</head>
<body>
<script>
function Checked(id)
{
if(id.checked==1)
{
alert("Checked");
}
else
{
alert("You didn't check it! Let me check it for you.")
id.checked = 1;
}
}
</script>
<div class="main_menu">
<a id='menu' href="javascript:" onclick="loadMenuPage();"></a>
</div>
<p>
All verifications required for QR7 can be uploaded here. Any item which still requires verification is
marked in red until picture has been attached.
</p>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Income </input>
</div>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Property </input>
</div>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Court Order Child Support </input>
</div>
<div class="bl">
<input type="checkbox" id="checkbox" class="checkbox" onclick="Checked(id);"> Future Medical Child Support </input>
</div>
</body>
</html>
Any suggestions on how do i achieve it. 关于如何实现的任何建议。 As of now i get a normal tick in the checkbox. 截至目前,我在复选框中得到了一个正常的勾号。
Thanks in advance. 提前致谢。
This post is old but this is what i suggest: 这篇文章很老,但这是我的建议:
Associate labels to your checkboxes like this: 将标签关联到您的复选框,如下所示:
<input type="checkbox" value="1" id="c1" />
<label class="check" for="c1"></label>
Hide by css your checkboxes: 通过CSS隐藏您的复选框:
.checkboxes input[type=checkbox]{
display:none
}
Style the label as you want to. 根据需要设置标签样式。 I created a simple jsfiddle that fully demonstrate how to use personnalise checkboxes. 我创建了一个简单的jsfiddle,充分演示了如何使用个性化复选框。 I use backgrond-color in this example, but you could easily use your background image instead. 在此示例中,我使用backgrond-color,但您可以轻松地使用背景图像。
Styling checkboxes using CSS is a nightmare and you'll never achieve the look you want. 使用CSS设置复选框样式是一个噩梦,您将永远无法获得想要的外观。 Try using a jQuery plugin, most of them 'hide' the checkbox by positioning the input off the visible screen and use a span replacement with a background image that you can edit to suit your needs. 尝试使用jQuery插件,其中大多数通过将输入置于可见屏幕之外来“隐藏”复选框,并使用范围替换替换为可根据需要进行编辑的背景图像。 Something like: http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/ 像这样的东西: http : //www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Also check this thread: Pure CSS Checkbox Image replacement 还要检查此线程: 纯CSS复选框图像替换
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.