样式复选框
Styling Checkbox
我试图插入一个图像,而不是复选框上的复选框。我使用的代码是:
<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>
关于如何实现它的任何建议。到目前为止,我在复选框中得到了一个正常的勾选。
提前谢谢。
这篇文章很旧,但这是我的建议:
将标签与您的复选框关联,如下所示:
<input type="checkbox" value="1" id="c1" />
<label class="check" for="c1"></label>
通过css隐藏您的复选框:
.checkboxes input[type=checkbox]{
display:none
}
我创建了一个简单的jsfiddle,充分展示了如何使用个性化复选框。我在这个例子中使用了背景色,但你可以很容易地使用你的背景图像。
这是jsfiddle
使用CSS设计复选框的样式是一场噩梦,你永远无法获得你想要的外观。尝试使用jQuery插件,大多数插件通过将输入定位在可见屏幕之外来"隐藏"复选框,并使用可以编辑以满足您需要的背景图像替换跨度。类似于:http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
还要检查此线程:纯CSS复选框图像替换
相关文章:
- 如果选中复选框,则添加样式
- 带有jQuery ui主题的自动样式复选框
- 未使用jQuery验证器选中Css样式复选框时
- Javascript选中一个表中的所有复选框,该表的行具有样式显示标记
- 使用相同的CSS样式创建多个复选框
- jQuery Mobile-过滤复选框的列表视图会导致出现无样式的复选框
- 更改复选框列表项样式
- 样式为 -webkit-外观的单选按钮:复选框:Chrome 中的不确定状态
- 鼠标按下和鼠标悬停事件的样式复选框
- jQuery 使用样式化的无线电和复选框验证插件
- 选择样式格式中的所有或某些父/子复选框
- 动态设置复选框标签文本会导致复选框中的样式问题
- 将父样式更改应用于组中的所有复选框;全部检查”;运行javascript函数
- 使用jquery更改复选框的样式
- 平面UI复选框样式不起作用
- 样式复选框
- 如何使用angularjs中的自定义指令,使用Unform jQuery插件设置浏览器默认复选框的样式
- 为什么我的复选框样式不起作用
- 设置复选框样式的Angular指令
- jQuery复选框样式问题