如何设计单选按钮?

I simply don't find any instructions how to style a radio button like the div in my example here: http://jsfiddle.net/Q5SRe/

在我的示例http://jsfiddle.net/Q5SRe/中，我根本找不到如何样式化单选按钮的任何指令

The div:

div:

div { 
    width:50px;
    height:50px;
    background-color:green
}

also I would like that when the radio button is selected it has:

我还想知道，当选择单选按钮时，它有:

border: medium solid #000;

2 个解决方案

#1

Radio buttons are part of the Shadow DOM, which as of yet can't be universally styled across browsers.

单选按钮是影子DOM的一部分，但它不能在所有浏览器中通用。

The best way currently to get custom radio buttons is to use images or the checkbox hack.

目前获得自定义单选按钮的最佳方式是使用图像或复选框。

Though if you're simply looking to give it a green border, you could also use pseudoelements, which might look something like this:

如果你只是想给它一个绿色的边界，你也可以使用伪元素，它看起来是这样的:

input[type=radio]:after {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  content: "";
}

And if you wanted that border to be round, you could use border-radius. I didn't put too much effort into this, but I'm sure it wouldn't take too much effort to make it more exact. Check it out.

如果你想让边界是圆的，你可以用边界半径。我并没有在这上面花太多的精力，但是我相信这并不会花费太多的精力去使它更精确。检查出来。

If you only want it to apply when it's checked, this would do just that.

如果您只希望它在检查时应用，那么它就会这样做。

Note that border radius and pseudoelements have pretty strict browser requirements, so if you're expecting users who might be using ancient versions of IE, it may be better to go with images or the checkbox hack.

注意，border radius和pseudo元素有非常严格的浏览器需求，所以如果您希望用户使用的是旧版本的IE，最好使用图像或复选框。

#2

I have used this before, it is not cross browser compatible and I would recommend you keep things simpler, but that depends on your personal choice and use case

我以前用过这个，它不是跨浏览器兼容的，我建议您简化一些，但是这取决于您的个人选择和用例

#1