调整大小单选按钮[重复]

Question

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

可以不使用图像吗？

Answer 1

调整单选按钮大小的一种快速解决方案是对其进行转换：

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

这会导致所有单选按钮的大小增加一倍。与往常一样，请检查browser support。

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

您无法更改单选按钮的大小。通常人们会设计一个自定义的 UI 元素来替换复选框/单选按钮的 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.

上述版本确实需要添加元素，这感觉没有必要，但允许在label 和input 元素（分别）中省略for 和id 属性。但是，如果您能够使用这些属性，那么 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 伪类的浏览器，并且在后一种方法的情况下，还需要一个实现伪元素的浏览器。考虑到这一点，遗憾的是，在 Internet Explorer 第九版之前（当它开始实现 :checked 选择器时），这些方法都不能在 Internet Explorer 中使用。

参考资料：

• '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/