Question

我想仅使用HTML和/或CSS更改单选按钮控件的大小。

可以不使用图像吗？

Answer 1

调整单选按钮大小的一个快速解决方案是转换它：

input[type='radio'] {
    transform: scale(2);
}

这导致所有单选按钮都是两倍大。与往常一样，请检查browser support。

原始答案（2012年5月27日）

您无法更改单选按钮的大小。通常人们会设计一个自定义UI元素来替换checkbox / radiobutton的UI方面。单击它会导致单击基础复选框/单选按钮。

请在此处查看示例：http://webdesign.maratz.com...radio-buttons/jquery.html

Answer 2

不是真的，不是以跨浏览器的方式。在Firefox，Safari和Chrome中，您可以通过设置appearance:none;（包含供应商前缀）来删除默认的单选按钮样式，然后您可以根据需要设置样式。但是IE和Opera还没有支持这个。

实现样式化复选框的唯一可靠方法是使用javascript使其他元素像复选框一样。但是，当然，那么你就是在禁用javascript的情况下搞砸了人们。最后，问题是粘性的，除了定位之外，我倾向于使复选框没有样式。

Answer 3

给出类似于以下内容的HTML：

<label>
    <input type="radio" name="group1" /><span class="radio1"></span>label 1 text</label>
<label>
<!-- and so on... -->

以下CSS允许您添加一个类来调整'假'radio元素的大小：

/* Hiding the radio inputs: */
input[type=radio] {
    display: none;
}
/* styling the spans adjacent to the radio inputs: */
input[type=radio] + span {
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 0.5em;
}
/* styling the span following the checked radio: */
input[type=radio]:checked + span {
    background-color: #ffa;
}
/* defining the height/width for the span-radio: */
.radio1 {
    width: 0.5em;
    height: 0.5em;
}
/* and so on... */

JS Fiddle demo

上述版本确实需要添加一个元素，这种元素感觉不必要，但允许省略for和id元素中的label和input属性（分别）。但是，如果您能够使用这些属性，则不需要span元素，这样就可以使用HTML，如下所示：

<input id="r1" type="radio" name="group1" class="radio1" />
<label for="r1">label 1 text</label>

使用CSS：

input[type=radio] {
    display: none;
}
/* Creating the psuedo-element to replace the radio inputs: */
input[type=radio] + label::before {
    content: '';
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 0.5em;
}
/* styling the checked 'radio': */
input[type=radio]:checked + label::before {
    background-color: #ffa;
}
/* defining the height/width of the 'radio' according to the class of
   the radio input element: */
.radio1 + label::before {
    width: 0.5em;
    height: 0.5em;
}
/* and so on... */

JS Fiddle demo

当然，不言而喻，这些方法需要浏览器理解:checked伪类，并且在后一种方法的情况下，需要一个实现伪元素的浏览器。考虑到这一点，遗憾的是，这些方法都不能在版本9之前的Internet Explorer中使用（当它开始实现:checked选择器时）。

参考文献：

'CSS Selectors,' at Quirksmode。

Answer 4

样式单选按钮不像其他表单元素那么容易，但您仍然可以这样做在css的帮助下，通过设置高度和宽度，但设计与浏览器不同尺寸外观可以更改，请参考此链接以供参考， http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

您可以选择javascript或UI图片进行明确更改。

谢谢..

Answer 5

如果你不关心IE8，你可以这样做：

HTML：

<div class="cb_wrap">
  <input type="checkbox" />
  <div class="cb_dummy"></div>
</div>

CSS：

.cb_wrap{
  position: relative            
}

input{
  opacity: 0;  
  position: relative;
  z-index: 10;
}

.cb_dummy{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;  
  width: 15px;
  height: 15px;
  background: #f00;    /* use some image */
}

input:checked + .cp_dummy{
  background: #0f0;   /* use some image */
}

演示：http://jsfiddle.net/FKqj3/

调整单选按钮的大小

5 个答案:

原始答案（2012年5月27日）