CSS - 单选按钮上的自定义样式 [英] CSS - Custom styling on radio button

问题描述

我这里有一个 jsfiddle - https://jsfiddle.net/5qmnptuk/4/

我正在尝试创建自定义单选按钮.

我隐藏了单选按钮，然后在标签上用 :after 创建了新的按钮.

我正在尝试使用 :checked 来设置点击的样式，但它不起作用

谁能看出为什么这不起作用.

 .form-group{边距顶部:30px；}标签{光标:指针；显示:内联块；位置:相对；padding-right: 25px;右边距:15px；}标签:之后{底部:-1px；边框:1px 实心 #aaa;边框半径:25px；内容: "";显示:内联块；高度:25px；右边距:25px；位置:绝对；右:-31px；宽度:25px；}输入[类型=收音机]{显示:无；}输入[类型=收音机]:选中+标签{内容:\2022；红色;字体大小:30px；文本对齐:居中；行高:18px；}

解决方案

你的代码有几个问题:

1 - 您的输入需要在 label

之前

+ 和 ~ CSS 选择器只选择 DOM 中一个元素之后的兄弟元素，所以你需要在标签之前有输入.

2 - 您的标签未分配给输入

要分配标签，请使用 for 属性，并为输入指定 ID:

 
<input type="radio" id="custom"/><label for="custom">标签</label>

3 - 伪元素的内容缺少引号.

4 - 您没有将样式应用于标签的 after 元素，而是直接将它们应用于标签:

 input[type=radio]:checked + label{内容:\2022；红色;字体大小:30px；文本对齐:居中；行高:18px；}

选择标签，同时:

input[type=radio]:checked + label:after{内容:\2022"；红色;字体大小:30px；文本对齐:居中；行高:18px；}

选择 after 元素

更新，正在运行的 JSFiddle

I have a jsfiddle here - https://jsfiddle.net/5qmnptuk/4/

I'm trying to craete a custom radio button.

Ive hidden the radio button and then created the new one with :after on the label.

I'm trying to use :checked to style the clicked but its not working

Can anyone see why this doesn't work.

    .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: \2022;
        color: red;
        font-size: 30px;
        text-align: center;
        line-height: 18px; 
    }

解决方案

There are several problems with your code:

1 - Your input needs to be before the label

The + and ~ CSS selectors only select siblings after an element in the DOM, so you need to have the input before the label.

2 - Your label isn't assigned to the input

To assign the label, use the for attribute, and give the input an ID:

  <div class="form-group">
    <input type="radio" id="custom" />
    <label for="custom">Label</label>
  </div>

3 - The content for the pseudo element is missing quotes.

4 - You aren't applying the styles to the after element of the label, you were applying them to the label directly:

 input[type=radio]:checked + label{
    content: \2022;
    color: red;
    font-size: 30px;
    text-align: center;
    line-height: 18px; 
}

Selects the label, while:

input[type=radio]:checked + label:after{
    content: "\2022";
    color: red;
    font-size: 30px;
    text-align: center;
    line-height: 18px; 
}

Selects the after element

Updated, working JSFiddle

这篇关于CSS - 单选按钮上的自定义样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！