7

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

不使用图像可以吗？

4

5 回答 5

32

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

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

这导致所有单选按钮的大小增加一倍。与往常一样，检查浏览器支持。

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

您不能更改单选按钮的大小。通常人们会设计一个自定义的 UI 元素来替换复选框/单选按钮的 UI 方面。单击它会导致单击底层复选框/单选按钮。

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

于 2012-05-17T05:40:49.210 回答
3

不是真的，不是跨浏览器的方式。在 Firefox、Safari 和 Chrome 中，您可以通过设置appearance:none;（使用供应商前缀）删除默认的单选按钮样式，然后您可以随意设置它的样式。但是 IE 和 Opera 还不支持这个。

实现样式复选框的唯一可靠方法是使用 javascript 使不同的元素充当复选框。但是，当然，那么你就是在用禁用 javascript 来欺骗人们。最后，这个问题很棘手，以至于我倾向于让复选框没有样式，除了定位。

于 2012-05-17T05:42:34.997 回答
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 小提琴演示。

上面的版本确实需要添加一个元素，这感觉没有必要，但允许从and元素中省略forandid属性（分别）。但是，如果您能够使用这些属性，则不需要这些元素，这允许 HTML 如下所示：labelinputspan

<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 小提琴演示。

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

参考：

于 2013-08-06T15:21:42.373 回答
1

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

您可以更喜欢 javascript 或 UI 图像来进行清晰的更改。

谢谢 ..

于 2012-05-17T05:43:33.500 回答
-1

如果你不关心 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/

于 2012-05-17T07:19:40.883 回答