html - 在 HTML 中个性化 "Radio"按钮

Question

好吧，我可以使用 CSS 更改“单选按钮”的大小，但我 不能 退出边框并更改背景颜色。

这是我的代码:

<input type="radio" class="textColoPgE1" id="textColoPgE" name="textColoPgE" value="col1">

还有 CSS:

.textColoPgE1
{
    background-color: blue;
    width: 20px;
    height: 20px;
    border: none;
}

如何个性化我的“单选”按钮？我希望你有一个解决方案。

谢谢

Answer 1

您需要制作一个假的单选按钮并隐藏(浏览器)默认按钮以使其工作。请参见下面的示例。首先它是一个蓝色按钮，但在它被点击(并选中)之后，它变成了红色。

label:before 将是您的假单选按钮将显示的容器。

/* Hide the radio button */

input[type=radio] {
    display: none;
}

/* We style the label */

.textColoPgE1-label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
}

.textColoPgE1-label:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    top: 0;
    position: absolute;
    background-color: blue;
    left: 0;
    border-radius: 50%;
}

/* We style the checked item */

.textColoPgE1:checked + .textColoPgE1-label:before {
    background-color: red;
}

<input type="radio" class="textColoPgE1" id="textColoPgE" name="textColoPgE" value="col1">
<label for="textColoPgE" class="textColoPgE1-label">Radio button</label>