Html 调整单选按钮大小

Resizing radio button

提问by cherry

I want to change size of a radio button control using only HTML and/or CSS.

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

Is it possible to do without using images?

可以不使用图像吗？

回答by Sampson

One quick solution to resizing the radio button is to transform it:

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

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

This results in all radio buttons being twice as large. As always, check browser support.

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

Original Answer (May 27, 2012)

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

You cannot change the size of the radio button. Typically people will design a custom UI element to replace the UI aspect of the checkbox/radiobutton. Clicking it results in a click on the underlying checkbox/radio button.

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

See an example here: http://webdesign.maratz.com...radio-buttons/jquery.html

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

回答by David says reinstate Monica

Given HTML similar to the following:

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

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

The following CSS allows you to add a class to resize the 'fake' radioelement:

以下 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.

JS小提琴演示。

The above version does require an added element, which feels unnecessary, but allows for the omission of the forand idattributes from the labeland inputelements (respectively). If you're able to use those attributes, however, then the spanelements aren't necessary, which allows HTML such as the following:

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

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

With the CSS:

使用 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.

JS小提琴演示。

It goes without saying, of course, that these approaches require browsers that understand the :checkedpseudo-class and, in the event of the latter approach, a browser that implements psuedo-elements. With that in mind, sadly, neither of these approaches can be used in Internet Explorer before version nine (when it began to implement the :checkedselector).

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

References:

参考：

• 'CSS Selectors,' at Quirksmode.

• “CSS 选择器”，在 Quirksmode。

回答by st-boost

Not really, not in a cross-browser manner. In Firefox, Safari, and Chrome, you can remove the default radio-button styling by setting appearance:none;(with vendor prefixes), then you can style it as you like. But IE and Opera don't support this yet.

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

The only reliable way to achieve styled checkboxes is to use javascript to make a different element act like a checkbox. But, of course, then you're screwing people with javascript disabled. In the end, the problem is sticky enough that I tend to leave checkboxes unstyled except for positioning.

实现样式复选框的唯一可靠方法是使用 javascript 使不同的元素表现得像复选框。但是，当然，那么您就是在欺骗禁用 javascript 的人。最后，这个问题很棘手，以至于除了定位之外，我倾向于不加样式地保留复选框。

回答by Deeps23

Styling radio button is not as easy as other form elements, but still you can do it with the help of css, by setting height and width, but the design differs from browsers The size look and feel can be changed, refer this link for reference, http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

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

You can either prefer javascript or UI images for clear changes.

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

thanks ..

谢谢 ..

回答by mborecki

if you don't care about IE8, you can do:

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

HTML:

HTML：

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

CSS:

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 */
}

Demo: http://jsfiddle.net/FKqj3/

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