将单选按钮替换为图像,用CSS或纯JS.一些限制
Replace radio buttons with images, with CSS or Pure JS. Some restrictions
<label for="apsgender">
<div class="join-label">Gender</div>
</label>
<fieldset id="gender_male">
<input type="radio" name="apsgender" value="1">
Male
</fieldset>
<fieldset id="gender_female">
<input type="radio" name="apsgender" value="2">
Female
</fieldset>
这就是我现在正在处理的代码。使用我从另一个堆栈溢出帖子中获取的此方法设置我的 css 不起作用,因为预先使用了字段集和奇怪的标签。
input[type="radio"] {
display:none;
}
label {
display:block;
padding-left:30px;
font-family:Arial;
font-size:16px;
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
}
input[type="radio"]:checked + label {
background: url('http://particletree.com/examples/buttons/tick.png') left center no-repeat;
}
我们的开发团队设置了这段代码,我想从来没有人尝试过将图像用于单选按钮。如果可能的话,我也可以使用纯 JS,但我只能将脚本放在元素之前的正文中,而不是之后。
让我知道这是否可能。提前谢谢。
我将发布我正在处理的jsFiddle,但实际上它无处可去。 http://jsfiddle.net/z25FR/1/
我有一个CSS解决方案,但一些HTML需要更改。
小提琴
首先,我们需要隐藏单选按钮,因为它不能被设置样式:
input[type="radio"]{
display: none;
}
然后,我们将单选按钮附近的文本设为标签:
<input id="male" type="radio" name="apsgender" value="1">
<label for="male">Male</label>
(不要忘记id
和for
否则您将无法检查单选按钮(
然后,我们将标签样式设置为看起来像一个按钮:
input[type="radio"]+label{
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
padding-left: 30px;
}
上面的代码将直接在单选按钮之后修改标签。然后,我们可以在单选按钮:checked
时将背景更改为另一个图像:
input[type="radio"]:checked+label{
background-image: url('http://projects.opengeo.org/common/geosilk/trunk/silk/accept.png');
}
虽然这可能没有帮助,但我会提到你错误地编码了 HTML。它应该是:
<fieldset>
<legend>Gender</legend>
<input type="radio" name="apsgender" id="m" value="1">
<label for="m">Male</label>
<input type="radio" name="apsgender" id="f" value="2">
<label for="f">Female</label>
</fieldset>
我见过自定义单选按钮,但没有来源。但是,取决于它的完成方式可能会有一些可访问性影响
http://jsfiddle.net/nm3uB/1/
您需要使用 Javascript 重写 HTML,然后使用 CSS 进行字段切换。一切都可以进入头部,无需触摸模板。
.JS:
window.onload=function(){
gender_male.innerHTML='<input type="radio" name="apsgender" value="1" checked><label>Male</label>';
gender_female.innerHTML='<input type="radio" name="apsgender" value="2"><label>Female</label>';
}
.CSS:
fieldset{position:relative}
input[type="radio"]{
opacity: 0;
position:absolute;
}
input[type="radio"]+label{
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/cross.png') left center no-repeat;
padding-left: 30px;
}
input[type="radio"]:checked+label{
background: url('http://projects.opengeo.org/common/geosilk/trunk/silk/accept.png') left center no-repeat;
padding-left: 30px;
}
相关文章:
- jQuery-2.1.1.min.js或最新版本jQuery-2.13.min.js不会't支持'@
- 为什么可以't PHP查找可以使用JS或jQuery访问的元素
- 使用js或extjs访问对象的java列表
- 通过浏览器加载页面时触发加载脚本(js或jQuery)'s”;返回“;作用
- 当一些事情可以通过JS或CSS完成时,我应该选择哪种方式
- 一个jquery验证器方法,它不接受纯数字或纯特殊字符,但接受上面是否有字母
- 网站未加载css、js或图像
- 使用JS或新查询对列表进行排序
- 在JS或jQuery或任何客户端脚本的帮助下,通过查看源代码读取源代码
- 将html注入<李>使用js或jquery
- 使用纯 Js 或 jquery 获取相同的 64 个类的 CSS 属性值
- JS:将纯文本 URL(在 blob 中)转换为链接或 iframe
- 如何获得此 JSON 结构?在纯JS或JQuery中
- 如何制作一个在移动设备上运行良好的动画手风琴?纯JS或WebKit transform3d
- 使用纯JS或jQuery通过Alt Tab检测浏览器页面窗口何时失去焦点
- 将单选按钮替换为图像,用CSS或纯JS.一些限制
- Jquery(或纯js)将更改事件绑定到数组中对象的属性
- 如何在不破坏任何事件的情况下使用jQuery(或纯JS)替换文本
- 如何知道多少我的滚动移动使用纯Js或jquery
- 是否可以在Angularjs或纯JS中获取远程图像的数据?