Question

好吧，我可以使用CSS更改“Radio”的大小，但我 cant 退出边框并更改背景颜色。< / p>

这是我的代码：

<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>

Answer 2

这里有一个很好的例子，说明了制作自己的单选按钮样式需要做什么：

http: //codepen.io/mitchmc/pen/pebIx

基本上，您需要转动按钮并设置标签样式。我搜索了同一问题的解决方案，并发现了这个非常明确且有用的解释：http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/

个性化HTML中的“Radio”按钮

2 个答案: