Html 使单选按钮更大？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4516217/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make radio button bigger?
提问by Latox
Is there any way to make a radio button bigger using CSS?
有没有办法使用 CSS 使单选按钮变大？
If not, how else can I do it?
如果没有，我还能怎么做？
回答by Manish Patel
Try this code:
试试这个代码：
input[type='radio'] { transform: scale(2); }
input[type='radio'] { transform: scale(2); }
回答by KesaVan
You can easily able to set it's height and width as with any element.
您可以轻松地设置它的高度和宽度，就像任何元素一样。
Here is the fiddle with code
这是代码的小提琴
HTML
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
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;
}
Styling radio button is not easy.
样式单选按钮并不容易。
Form elements in general are either problematic or impossible to style using CSS alone.
一般来说，表单元素要么有问题，要么不可能使用CSS alone.
Just go through this link for your own style with bigger size for radio buttons..
只需通过此链接获得您自己的风格，单选按钮的尺寸更大..
Also look at this link...
也看看这个链接...
回答by Naveed
You can do it using CSS but browser and OS also impact on this. Look at following article.
您可以使用 CSS 来实现，但浏览器和操作系统也会对此产生影响。看看下面的文章。
回答by Paul Kruger
Dont use transform: scale(1.3), it really looks horrible. Just use this:
不要用transform: scale(1.3)，它看起来真的很可怕。只需使用这个：
input[type='radio'] {
height: 15px
width: 15px;
vertical-align: middle;
}
...
<input type="radio">Select this item
回答by Cas Bloem
Try this:
尝试这个：
HTML
HTML
<label>
<input type="radio" value="1">
<div></div>
</label>
CSS
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;
}
回答by Cole
There might be some quirky <span>tricks inside radio elements but I imagine using them across different browsers would be annoying to debug.
<span>无线电元素中可能有一些古怪的技巧，但我想在不同的浏览器中使用它们会很烦调试。
I've used this scriptin the past but not recently.
我过去使用过这个脚本，但最近没有使用过。
回答by lubosdz
CSS3 transform scale is blurry. Setting height & width does not work with FF (even the newest 66 does not support, 2020). The only cross-browser solution is custom HTML markup + CSS, which unfortunatelly is not the easiest way. See helpful tutorial custom radios & checkboxes.
CSS3 变换比例模糊。设置高度和宽度不适用于 FF（即使是最新的 66 也不支持，2020）。唯一的跨浏览器解决方案是自定义 HTML 标记 + CSS，不幸的是这不是最简单的方法。请参阅有用的教程自定义收音机和复选框。
