Question

When using the WebGL renderer from Three.js, radio buttons gain white backgrounds. It appears to only occur in Chrome.

Here’s a fiddle showing the problem: http://jsfiddle.net/5pL8v/328/

Is there any, and if so preferably CSS, fix to this?

Example code:

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

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

<input type="radio">

Answer 1

I was not able to see the problem OSX / Chrome beta. However, it is probably related to the rendering of widgets in native style by default and your operating system version. You can disable this in WebKit browsers using -webkit-appearance: none.

Example how to replace radio button with a green square:

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;
}

I suggest you style radio buttons in platform-neutral way if they break on you. Here is one tutorial: http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/