Chrome 和 WebGL <canvas> 的单选按钮背景颜色

【问题标题】：Radio button background color with Chrome and WebGL <canvas>Chrome 和 WebGL <canvas> 的单选按钮背景颜色
【发布时间】：2012-11-29 16:56:04
【问题描述】：

使用 Three.js 中的 WebGL 渲染器时，单选按钮获得白色背景。它似乎只出现在 Chrome 中。

这是一个显示问题的小提琴：http://jsfiddle.net/5pL8v/328/

有没有，如果有，最好是 CSS，解决这个问题？

示例代码：

<style>
body {
    background: black;
}
</style>

<script>
renderer = new THREE.WebGLRenderer();
$(document).ready(function() {
    $("body").append(renderer.domElement);
});
</script>

<input type="radio">

【问题讨论】：

标签： javascript css radio-button webgl three.js

【解决方案1】：

我无法看到问题 OSX / Chrome beta。但是，它可能与默认情况下以原生样式呈现小部件和您的操作系统版本有关。您可以在 WebKit 浏览器中使用 -webkit-appearance: none 禁用此功能。

如何将单选按钮替换为绿色方块的示例：

body {
    background: black;
    color: white;
}

input[type=radio] {
    background: green;
    color: yellow;
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
}

input[type=radio]:checked {
    background: red;
}

如果单选按钮对你造成影响，我建议你以平台中立的方式设计单选按钮。这是一个教程：http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/

【讨论】：

谢谢。我最终决定修改您的方法并隐藏单选按钮并留下启用/禁用效果的标签。