纯CSS自定义单选按钮(整个宽度) [英] Pure CSS custom radio button (whole width)
问题描述
我希望仅使用CSS设置单选按钮的样式(无背景图片)
I wish to style a radio button like this using CSS only (no background image):
左:选中/右:未选中
我知道如何替换复选框中的单选点或对勾-互联网上有很多关于此的教程-但我找不到找到使矩形像这样位于标签文本后面的方法(矩形达到输入尺寸的100%,并在其周围没有多余的空白).
I know how to replace the radio dot or the tick from the checkbox - there are plenty of tutorials on the internet regarding that - but I couldn't find a way to make the rectangle sit behind the label text like this (rectangle to be 100% of the input's size & leave no extra blank space around it).
应考虑与旧版浏览器(IE8)的兼容性.
Compatibility with older browsers (IE8) should be taken into account.
这是我的html(我正在使用引导程序):
This is my html (I'm using bootstrap):
<div class="col-xs-6 col-sm-6">
<input type="radio" id="gender_woman" name="gender" value="madame" checked>
<label for="connexion_madame">MADAME</label>
</div>
<div class="col-xs-6 col-sm-6">
<input type="radio" id="gender_man" name="gender" value="monsieur">
<label for="connexion_monsieur">MONSIEUR</label>
</div>
推荐答案
(我不使用引导程序)
HTML
<label class="radio">
<input type="radio" name="gender" value="MADAME">
<span>MADAME</span>
</label>
<label class="radio">
<input type="radio" name="gender" value="MONSIEUR">
<span>MONSIEUR</span>
</label>
CSS
label.radio {
cursor: pointer;
}
label.radio input {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
pointer-events: none;
}
label.radio span {
padding: 7px 14px;
border: 2px solid #EEE;
display: inline-block;
color: #009BA2;
border-radius: 3px;
text-transform: uppercase;
}
label.radio input:checked + span {
border-color: #009BA2;
}
链接JSFiddle: https://jsfiddle.net/edbmwz0c/
Link JSFiddle: https://jsfiddle.net/edbmwz0c/
希望可以帮助您
这篇关于纯CSS自定义单选按钮(整个宽度)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!