CSS - 单选按钮的自定义样式
CSS - Custom styling on radio button
我这里有一个 jsfiddle - https://jsfiddle.net/5qmnptuk/4/
我正在尝试创建自定义单选按钮。
我隐藏了单选按钮,然后在标签上创建了带有 :after 的新按钮。
我正在尝试使用 :checked 来设置点击的样式,但它不起作用
谁能看出为什么这不起作用。
.form-group{
margin-top: 30px;
}
label{
cursor: pointer;
display: inline-block;
position: relative;
padding-right: 25px;
margin-right: 15px;
}
label:after{
bottom: -1px;
border: 1px solid #aaa;
border-radius: 25px;
content: "";
display: inline-block;
height: 25px;
margin-right: 25px;
position: absolute;
right: -31px;
width: 25px;
}
input[type=radio]{
display: none;
}
input[type=radio]:checked + label{
content: 22;
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
更新了 fiddle 我为收音机和标签需求添加了 id
for="radioId"
能够那样工作
标签也需要在单选按钮之后
您的代码有几个问题:
1 - 您的输入需要 在 之前 label
+
和~
CSSselect或仅select兄弟姐妹在之后的一个元素DOM,所以你需要在标签前输入。
2 - 您的标签未分配给输入
要分配标签,请使用 for
属性,并为输入指定一个 ID:
<div class="form-group">
<input type="radio" id="custom" />
<label for="custom">Label</label>
</div>
3 - 伪元素的内容缺少引号。
4 - 您没有将样式应用到标签的后元素,而是直接将它们应用到标签:
input[type=radio]:checked + label{
content: 22;
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
选择标签,同时:
input[type=radio]:checked + label:after{
content: "22";
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
选择 after
元素
我这里有一个 jsfiddle - https://jsfiddle.net/5qmnptuk/4/
我正在尝试创建自定义单选按钮。
我隐藏了单选按钮,然后在标签上创建了带有 :after 的新按钮。
我正在尝试使用 :checked 来设置点击的样式,但它不起作用
谁能看出为什么这不起作用。
.form-group{
margin-top: 30px;
}
label{
cursor: pointer;
display: inline-block;
position: relative;
padding-right: 25px;
margin-right: 15px;
}
label:after{
bottom: -1px;
border: 1px solid #aaa;
border-radius: 25px;
content: "";
display: inline-block;
height: 25px;
margin-right: 25px;
position: absolute;
right: -31px;
width: 25px;
}
input[type=radio]{
display: none;
}
input[type=radio]:checked + label{
content: 22;
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
更新了 fiddle 我为收音机和标签需求添加了 id
for="radioId"
能够那样工作
标签也需要在单选按钮之后
您的代码有几个问题:
1 - 您的输入需要 在 之前 label
+
和~
CSSselect或仅select兄弟姐妹在之后的一个元素DOM,所以你需要在标签前输入。
2 - 您的标签未分配给输入
要分配标签,请使用 for
属性,并为输入指定一个 ID:
<div class="form-group">
<input type="radio" id="custom" />
<label for="custom">Label</label>
</div>
3 - 伪元素的内容缺少引号。
4 - 您没有将样式应用到标签的后元素,而是直接将它们应用到标签:
input[type=radio]:checked + label{
content: 22;
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
选择标签,同时:
input[type=radio]:checked + label:after{
content: "22";
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
选择 after
元素