我正在设计单选按钮的样式(隐藏它们并将标签用作按钮),并尝试将边框半径放在第一个 child 上,但它没有按预期响应,或者我做错了。
如何在第一个标签上实现左边框半径?
在此处查看实际效果> http://jsfiddle.net/sthrc57f/
HTML:
<input type="radio" name="radios" id="radioone" value="one">
<label for="radioone">radio 1</label>
<input type="radio" name="radios" id="radiotwo" value="two" checked="checked">
<label for="radiotwo">radio 2</label>
CSS:
input[type=radio] {
display:none;
}
input[type=radio] + label {
cursor: pointer;
display: inline-block;
margin: 0;
padding: 0.5em 2em 0.5em 2em;
background-color: #eeeeee;
color: #bbbbbb;
}
input[type=radio] + label:first-child {
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
-webkit-border-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-o-border-top-left-radius: 7px;
-o-border-bottom-left-radius: 7px;
-moz-border-top-left-radius: 7px;
-moz-border-bottom-left-radius: 7px;
}
input[type=radio]:checked + label {
background-color: green;
color: white;
}
input[type=radio]:checked + label:before {
content: "✓ ";
}
我试过很多组合:
input[type=radio] label:first-child
input[type=radio]:first-child label
label:first-child
等等。运气不好
我怀疑可能是因为单选按钮本身是隐藏的,所以不能像这样定位第一个标签?
编辑:已解决。这是工作版本:http://jsfiddle.net/sthrc57f/2/
最佳答案
我想我会将我的回复放在此处的答案中,以防它们也能帮助其他人。 That's not how :first-child
works ;在您的标记中没有标签元素是第一个子元素。也许您的意思是 :first-of-type
?
label:first-of-type {
border-radius: 7px;
}
关于html - :first-child not working on label (hidden radio button),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25390671/