Radio Buttons Show Unwanted White Background in Chrome. Firefox Is Fine

Radio button background goes white in Windows Chrome when using -webkit-backface-visibility. Any workarounds?

I have found the same problem but in different context, so might be it's not a problem with -webkit-backface-visiblity but with several combinations of things. In my case the problem arises when the page with the radio buttons contains a google maps like map (a propietary one, I haven't found what exactly in the map causes the problem) and is displayed inside an iframe.
If I hide the map with the inspector the radio buttons look ok, or if I view the page directly, not inside the iframe.

The only workaround I've found is in this page from CSS ninja: http://www.thecssninja.com/css/custom-inputs-using-css.

In summary, this is the solution (there is a live demo linked from the page I've mentioned, http://www.thecssninja.com/demo/css_custom-forms/):

HTML

<label for="input1" class="radio_image">
 <input type="radio" name="input" id="input1" />
 <span>Option 1</span>
</label>

CSS

/*we hide the real radio button*/
.radio_image input[type=radio] {
  position:absolute;opacity:0;
}
/*we assign the span a background image
  which is a capture of the actual radio button*/
.radio_image input[type=radio] + span {
  background-image: url("radio-button.gif");
  background-position: left top;
  background-repeat: no-repeat;
  padding-left: 1.6em;
}
/*if radio is checked we change the background
  image to one with a checked radio button (it can be
  done with a sprite type background too): */
.radio_image input[type=radio]:checked + span {
  background-image: url("radio-button-checked.gif");
}

As the span is inside the label, clicking on it will have the same effect as clicking on the radio button itself, so the radio button still works ok.

I am working in a developement enviroment so I can´t post you the url, but with the code and the links above I think it's easy to see.

If you want to target just Chrome, you can try the solution provided in this post:
Can you target Google Chrome?

I hope it helps, I don't like such a complicated way to render just a simple radio button, in my case I've used it in the only page having that problem in my site and it has worked fine.

Radio buttons appearing tiny in chrome and IE but appearing decent size in firefox

add some css, you have none

#input-group {  height: 60px;}input {  height: 20px!important;  vertical-align: middle;}label {  height: 57px!important;  vertical-align: middle;}input,label {  display: inline;}

<!DOCTYPE html><html>
<head>  <meta charset="utf-8">  <title>JS Bin</title></head>
<body>  <p>Network Port Configuration</p>  <div id="input-group">    <label for="cm">Connection Mode</label>    <input type="radio" name="cm" id="static" value="static">    <label for="static">Static</label>    <input type="radio" name="cm" id="dhcp" value="dhcp">    <label for="dhcp">DHCP</label>  </div></body>
</html>

Don't understand why Firefox is displaying white background behind my text

You need to draw a background too.
From pseudo or from element itself :2 examples to tune to your needs.

pseudo:

background:#5099D6;
background-clip:padding-box;

element:

background:url(http://www.rwe-uk.com/static/ichat_with_css3/speech_bubble_left_2.png) center / 300% 150%;
background-clip:content-box;

Showing unwanted space on the right side of a page in mobile chrome browser but fine in mobile firefox browser

this is because of you make container padding 0pxusing class px-0 remove this class with the container class at the place mentioned by me in following image. I am sure this will help.

Sample Image

Thank you.

Mozilla Firefox input radio button styling and default settings

I wouldn't advise styling radio buttons to look like checkboxes but since you ask might I suggest that you approach it a different way...

Position the label after the input, hide the input (we'll use just the label to toggle it), then use the Adjacent Sibling Selector to style the label adjacent to the :checked input:

Like this:

input[type="radio"] {    /* hide the real radio button - but not with display:none as it causes x-browser problems */    opacity:0.2;    position:absolute;    /*left:-10000;*/}input[type="radio"] + label {    cursor: pointer;}/* N.B You could use a child span in the label if you didn't want to use the :after pseudo */input[type="radio"] + label:after {    display:inline-block;    content:"✓";    font-size:30px;    line-height:45px;    text-align:center;    color:#ccc;    background: #ccc;    width: 45px;    height: 45px;    vertical-align: middle;    margin: 0 10px;    border-radius:50%;      border:1px solid grey;}input[type="radio"] + label:hover:after {    background: #aaa;    }input[type="radio"]:checked + label:after {    color:#fff;    background: #555;     box-shadow:0 0 8px deepSkyBlue;    border-color:white;}

<form>            <input id="a" name="myradio" type="radio" />    <label for="a">One</label>    <input id="b" name="myradio" type="radio" />    <label for="b">Two</label></form>

How do I change the color of radio buttons?

A radio button is a native element specific to each OS/browser. There is no way to change its color/style, unless you want to implement custom images or use a custom Javascript library which includes images (e.g. this - cached link)