使单选按钮更大？

Posted 2023-03-05

【中文标题】使单选按钮更大？

【英文标题】：Make radio button bigger?

【发布时间】：2011-05-29 19:25:15

【问题描述】：

有没有办法使用 CSS 使单选按钮变大？

如果没有，我还能怎么做？

【问题讨论】：

看到这个链接可能对你有帮助thecssninja.com/css/custom-inputs-using-css

你到底想在这里实现什么？可能有替代解决方案......就像使用图像模拟单选按钮......

***.com/questions/7727255/…

@ChristopheRoussy 问题，您已链接，与此 OP 的问题无关。在这里，要求更大的单选按钮（解决方案是更改 input 元素的样式），而在您的链接问题中，OP 询问更大的“可点击”区域（解决方案是更改 label 样式）。相反，Here 是适合 OP 在此问题中提出的问题的答案。最快的答案 ((c) imanabidi) -- “设置宽度和高度并使用 em 度量，例如：宽度：1.2em；高度：1.2em”。

***.com/questions/4920281/…

【参考方案1】：

试试这个代码：

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

【讨论】：

单选按钮使用“transform”比使用“width”和“height”看起来更好，并且比其他解决方案简单得多。

对我来说实际上并没有那么糟糕。我在 IE 11、Chrome 和 FF 上进行了测试，它们看起来不错。谢谢！

【参考方案2】：

您可以像设置任何元素一样轻松设置它的高度和宽度。

这里是代码的小提琴

JSFIDDLE BIG RADIO BUTTON

HTML

<input id="r1" type="radio" name="group1" class="radio1" />
<label for="r1">label 1 text</label>
<input id="r2" type="radio" name="group1" class="radio2" />
<label for="r2">label 2 text</label>
<input id="r3" type="radio" name="group1" class="radio3" />
<label for="r3">label 3 text</label>
<input id="r4" type="radio" name="group1" class="radio4" />
<label for="r4">label 4 text</label>

CSS

input[type=radio] 
    display: none;

input[type=radio] + label::before 
    content: '';
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 0.5em;

input[type=radio]:checked + label::before 
    background-color: #ffa;


.radio1 + label::before 
    width: 0.5em;
    height: 0.5em;


.radio2 + label::before 
    width: 0.75em;
    height: 0.75em;


.radio3 + label::before 
    width: 1em;
    height: 1em;


.radio4 + label::before 
    width: 1.5em;
    height: 1.5em;

设计单选按钮并不容易。

一般来说，使用CSS alone 设置表单元素有问题或无法设置样式。

只需通过此链接了解您自己的风格，单选按钮尺寸更大..

也看看这个链接...

Bigger radio buttons

【讨论】：

这个很聪明，我喜欢！为我工作。谢谢！

@LukeP : 永远欢迎 :)

有什么方法可以避免损害可用性吗？显然这不适用于键盘。

【参考方案3】：

您可以使用 CSS 来实现，但浏览器和操作系统也会对此产生影响。请看下面的文章。

Styling radio buttons with CSS

【参考方案4】：

不要使用transform: scale(1.3)，它看起来真的很可怕。就用这个吧：

input[type='radio'] 
  height: 15px;
  width: 15px;
  vertical-align: middle;

<input type="radio">Select this item

【参考方案5】：

试试这个：

HTML

<label>
   <input type="radio" value="1">
   <div></div>
</label>

CSS

input[type="radio"] 
   display: none;


input[type="radio"] + div 
   height: 20px;
   width: 20px;
   display: inline-block;
   cursor: pointer;
   vertical-align: middle;
   background: #FFF;
   border: 1px solid #d2d2d2;
   border-radius: 100%;


input[type="radio"] + div:hover 
    border-color: #c2c2c2;


input[type="radio"]:checked + div 
    background:gray;

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

【讨论】：

标签（内联元素）不能包含 DIV（块级元素） - ***.com/questions/18609554/…

【参考方案6】：

无线电元素中可能有一些古怪的 <span> 技巧，但我想在不同的浏览器中使用它们会很烦人。

我过去使用过this script，但最近没有。

【参考方案7】：

CSS3 变换比例模糊。设置高度和宽度不适用于 FF（即使是最新的 66 也不支持，2020）。唯一的跨浏览器解决方案是自定义 html 标记 + CSS，不幸的是这不是最简单的方法。查看有用的教程custom radios & checkboxes。