Question

我设置单选按钮样式（隐藏它们并使用标签作为按钮），并尝试将边框半径放在第一个孩子上，但它没有按预期响应，或者我做错了

如何在第一个标签上实现左边界半径？

在此处查看此操作＆gt; 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/

Answer 1

我想我会在这里回答我的回答以防他人也帮助他人。 That's not how :first-child works;没有标签元素是标记中的第一个子元素。也许你的意思是:first-of-type？

label:first-of-type {
    border-radius: 7px;
}

JSFiddle Example

：第一个孩子不在标签上工作（隐藏单选按钮）

1 个答案: