自定义和不同的单选按钮
自定义和不同的单选按钮
提问于 2013-01-14 19:33:42
我发现了一种CSS结构，它可以让我的单选按钮与自定义背景图像一起工作。但它们都有相同的背景图像。是否可以编写一个结构，使每个单独的单选按钮都有自己的背景图像，但功能保持不变。
我粘贴了一个JsFiddle示例：JSFiddle example
例如，我希望最后一个单选按钮“甜瓜”有一个不同的背景图像。我该怎么做呢？
到目前为止的CSS：
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
display:inline;
font-size: 18px;
}
input[type="radio"] + label:before {
content: '';
display:inline-block;
width: 32px;
height: 32px;
background: url(http://dl.dropbox.com/u/51558405/radio-checked.png) no-repeat;
vertical-align: middle;
}
input[type="radio"]:checked + label:before {
content: '';
background: url(http://dl.dropbox.com/u/51558405/radio-unchecked.png) no-repeat;
}回答 3
Stack Overflow用户
回答已采纳
发布于 2013-01-14 20:54:04
您可以覆盖您的css。将此css放在您的input[type="radio"]:checked + label:before css之后
#radio4 + label:before {
content: '';
background: url(your image path);
}希望这能有所帮助。
谢谢,
Stack Overflow用户
发布于 2013-01-14 19:40:21
可工作和可扩展的代码。Live Demo
所有radio按钮的名称应该相同，以便它们作为一个组工作。我已经将class="class1"添加到普通条目中，并将class="class2"添加到特殊条目中。
HTML
<li>
<input class="class1" type="radio" id="radio" name="radios" checked />
<label for="radio">Apples</label>
</li>
<li>
<input class="class1" type="radio" id="radio2" name="radios" />
<label for="radio2">Pineapples </label>
</li>
<li>
<input class="class1" type="radio" id="radio3" name="radios" />
<label for="radio3">Pomarance</label>
</li>
<li>
<input class="class2" type="radio" id="nekaj" name="radios" />
<label for="nekaj">Pomarance123</label>
</li>CSS
input[type="radio"][class="class1"] + label:before {
content: '2';
display:inline-block;
width: 32px;
height: 32px;
background: url(http://dl.dropbox.com/u/51558405/radio-checked.png) no-repeat;
vertical-align: middle;
}
input[type="radio"][class="class1"]:checked + label:before {
content: '3';
background: url(http://dl.dropbox.com/u/51558405/radio-unchecked.png) no-repeat;
}
input[type="radio"][class="class2"] + label:before {
content: '444';
display:inline-block;
width: 32px;
height: 32px;
background: url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-th.png) no-repeat;
background-size:100% auto;
vertical-align: middle;
}
input[type="radio"][class="class2"]:checked + label:before {
content: '444';
display:inline-block;
width: 32px;
height: 32px;
background: url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-th.png) no-repeat;
background-size:100% auto;
vertical-align: middle;
}Stack Overflow用户
发布于 2013-07-15 14:50:11
我也在做同样的事情，但我的问题是不同的浏览器显示不同的对齐方式，单选按钮的垂直对齐方式不正确，特别是mac上的google-chrome从不显示正确的对齐方式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14317678
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号