Question

有没有办法只使用css更改单选按钮的外观。但是，简单的输入无线电，而不是标签css调整。

就像，这是我的代码：FIDDLE

<input type="radio" name="radio1" class="radiostyle" value="1">
<input type="radio" name="radio1" class="radiostyle" value="2">
<input type="radio" name="radio1" class="radiostyle" value="3">

然后，这是我的css：

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

.radiostyle {
    display:inline-block;
    width:19px;
    height:19px;
    background-color: blue;
    /*or instead of color use some image*/
}

因此，我是否有办法轻松做到这一点。因为，我想放置图像而不是简单的单选按钮。

Answer 1

使用实验pointer-events属性，这是可能的。虽然，我强烈建议（正确）使用标签来增加您网站的可访问性。标签还可以实现更广泛的浏览器兼容性。此外，由于它是一个实验性的财产，我不确定它的未来存在或支持。

JSFiddle

List of support for pointer-events

CSS代码：

input[type=radio]:before {
    display: block;
    width: 19px;
    height: 19px;
    content: '';
    position: absolute;
    background-image: url(http://placekitten.com/19/19);
    pointer-events: none;
}

input[type=radio]:checked:before {
    background-image: url(http://placekitten.com/25/25);
}

.radiostyle {
    display:inline-block;
    width:19px;
    height:19px;
    background-color: blue;
    /*or instead of color use some image*/
}

单选按钮可更改CSS背景颜色或背景图像（不带标签的简单代码）

1 个答案: