单选按钮样式 [英] Radio Button Styling

问题描述

我想用纯CSS，没有类或ID来设计单选按钮。只需输入[type = radio]。
我想使用背景图片来取消选择和选择。
但是，-vendor-appearance：none;不与Trident或Gecko一起工作。只是Webkit。
在这些浏览器中，您可以看到背景图像作为单选按钮的背景，但按钮仍然存在，而不仅仅是显示图像，我如何摆脱按钮，只是背景图像显示。小提琴： http://jsfiddle.net/7kScn/

I want to style radio buttons with pure CSS, no classes or IDs. Just input[type=radio]. I want to use a background image for unselected and selected. However, the -vendor-appearance:none; doesn't work with Trident or Gecko. Just Webkit. In those browsers you can see the background image as a background to the radio button but the button is still there rather than just displaying the image, how can I get rid of the button so just the background image displays. The fiddle: http://jsfiddle.net/7kScn/

推荐答案

您可以使用CSS2选择器技巧连接到单选组，然后立即显示其他内容。

You can use a CSS2 selector trick to connect to a radio group and display other stuff immediately after.

请参阅：http://jsfiddle.net/7kScn/1/

这只是一个基本的示例，但它的操作是隐藏输入字段，然后在其后立即对标签进行样式设置，从而使其成为您要检查的实际效果。

It's just a basic example, but it operates on the premise of hiding the input field and then styling the label immediately after it, giving it the effect that it's the actual thing you're checking.

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