CSS 样式化单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17060110/
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
Styling a radio button
提问by CJe
I have a jQuery dialog on two different pages. For some reason the radio buttons look different (one page is pure HTML/Javascript and the other is created by some internal framework created by the customer I'm working for).
我在两个不同的页面上有一个 jQuery 对话框。出于某种原因，单选按钮看起来不同（一个页面是纯 HTML/Javascript，另一个页面是由我为之工作的客户创建的某个内部框架创建的）。
I'm trying to figure out what to look for in the css that causes the difference in radio button presentation.
我试图弄清楚要在 css 中查找导致单选按钮呈现差异的内容。
The two scenarios look like this:
这两个场景看起来像这样：
Wrong:
错误的：
Right:
对：
Can anyone help with some clues as to what to look for?
任何人都可以提供一些关于要寻找什么的线索吗？
Maybe I should add that both pictures are from IE8.
也许我应该补充一下，这两张图片都来自 IE8。
采纳答案by CJe
I found the culprit:
我找到了罪魁祸首：
<meta name="MSThemeCompatible" content="no">
This bit is in one page and not the other. So either I have to remove it in one page or add it to the other to make them look alike.
这个位在一页而不是另一页。因此，要么我必须在一页中将其删除，要么将其添加到另一页以使它们看起来相似。
回答by Dominik Schreiber
Styling (EDIT: borders, colors, background of)a radio button itself is not possible in css. But you can hack a bit around with hidden radio buttons and overlaid images like described here
样式（编辑：边框、颜色、背景）单选按钮本身在 css 中是不可能的。但是您可以使用隐藏的单选按钮和覆盖的图像进行一些修改，如此处所述
- http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
- http://www.andreapinchi.it/how-to-style-radio-buttons-with-pure-css/
- http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
- http://www.andreapinchi.it/how-to-style-radio-buttons-with-pure-css/
Essentially you hide your radio buttonand put a spanright at its place that, when clicked, changes its styling:
基本上你隐藏你的单选按钮并span在它的位置放置一个右键，当点击时，改变它的样式：
html
html
<label><input type="radio"><span class="overlay"></span> radio button</label>
css
css
input[type=radio] {
opacity: 0;
z-index: 9999;
}
/* default radio button style: unchecked */
.overlay {
display: inline-block;
position: relative;
left: -1em; /* or whatever length you need here */
height: 1em;
width: 1em;
background-color: red;
}
/* changed style when checked */
input[type=radio]:checked + .overlay {
background-color: green;
}
Try it in this jsFiddle
在这个jsFiddle 中试试
回答by Stocki
Inspect both elements with Web Developer Tool. Press F12 in IE8 then click on the cursor icon top left (or press Ctrl+B). Click on the radio button to inspect it.
使用 Web Developer Tool 检查这两个元素。在 IE8 中按 F12，然后单击左上角的光标图标（或按 Ctrl+B）。单击单选按钮进行检查。
It is recommended use Google Chrome's WDT, 'cause it can tell you more (eg. related CSS file) plus easier and faster to use. You can right click on the radio button and click 'Inspect Element' to see more (DOM, CSS).
推荐使用谷歌浏览器的 WDT，因为它可以告诉你更多（例如相关的 CSS 文件），而且使用起来更容易、更快捷。您可以右键单击单选按钮并单击“检查元素”以查看更多（DOM、CSS）。
回答by Felix Hagspiel
Styling of radio buttons is very limited, especially in older browsers. I wrote a tutorial about how to customize checkboxes and radios with CSS only, as well as create on/off switches via styling the label and using it's :beforeand :afterpseudoclasses. It has an IE8 fallback. Maybe this helps :) Read it here: http://blog.felixhagspiel.de/index.php/posts/custom-inputs
单选按钮的样式非常有限，尤其是在较旧的浏览器中。我写了一个教程，介绍如何仅使用 CSS 自定义复选框和收音机，以及通过设置标签样式并使用标签:before和:after伪类来创建开/关开关。它有一个 IE8 后备。也许这有帮助 :) 在这里阅读：http: //blog.felixhagspiel.de/index.php/posts/custom-inputs
