是否可以使用不带标签的纯CSS单选按钮输入进行自定义? [英] Is it possible to customize with pure css radio button input without label?

问题描述

<input id="whateveryoulike" class="whateveryoulike" name="test" type="radio" checked="checked">
<input id="whateveryoulike2" class="whateveryoulike2" name="test2" type="radio">

是否有可能自定义这两个元素而无需针对每个元素的标签并且仅使用css(带有html和imgs)?

Is this possible to customize this two elements without targeting the label of each one of them and using only css(with html and imgs)?

推荐答案

我尝试使用input[type=radio]::after，但它似乎不起作用.但这是一个不错的小技巧，可在所有现代浏览器中使用:

I tried to use input[type=radio]::after, but it doesn't seem to work. But here's a nice little trick that works in all modern browsers:

在每个单选按钮后放置一个<span>，之间没有空格.此跨度在输入上方，但是由于pointer-events: none(在较旧的IE版本中不支持此输入)，因此输入仍然可以单击.

Put a <span> after every radio button, with no whitespace between. This span is above the input, but the input is still clickable because of pointer-events: none (this is not supported in older IE Versions).

现在，您可以根据需要设置按钮的样式:

Now you can style the buttons however you want:

span.customRadio {
    display: none;
}

input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: default;
}

input[type="radio"] + span.customRadio {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: white;
    margin: 0 0 0 -16px;
    border-radius: 50%;
    box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}
input[type="radio"] + span.customRadio::after {
    content: '.';
    color: transparent;
    position: absolute;
    display: block;
    width: 2px;
    height: 2px;
    margin: 7px 0 0 7px;
    opacity: 0.6;
    border-radius: 50%;
    transition: .2s;
}
input[type="radio"]:checked + span.customRadio::after {
    width: 10px;
    height: 10px;
    margin: 3px 0 0 3px;
    opacity: 1;
    background-color: #3388ff;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
}

<input name="test" type="radio" checked="checked"><span class="customRadio"></span>
<input name="test2" type="radio"><span class="customRadio"></span><br><br>

In action:<br>

<input name="test3" type="radio"><span class="customRadio"></span>

<input name="test3" type="radio"><span class="customRadio"></span>

<input name="test3" type="radio"><span class="customRadio"></span>

JSFiddle

JSFiddle

这篇关于是否可以使用不带标签的纯CSS单选按钮输入进行自定义?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！