Cant apply CSS on HTML Input Radio

Question

Css

.techRadio {
    background: red;
    height: 15px;
}

HTML

<input type="radio" class="techRadio" checked="true" name="techBullet"/>
<input type="radio" class="techRadio" name="techBullet" />
<input type="radio" class="techRadio" name="techBullet" />

Whats wrong here?

Answer 1

As mentioned by dooxe, above, you really can't do much to style a radio button.

But there are many examples on the web of hiding the boring radio button and styling the label.

Here is one example of "extreme" styling - FIDDLE.

(Update with code for getting value of button - FIDDLE.)

HERE is the website with the code - and there are MANY other examples.

CSS for first example

input[type=radio] {
    display:none; 
    margin:10px;
}
input[type=radio] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    background-color: #e7e7e7;
    border-color: #ddd;
}
input[type=radio]:checked + label { 
   background-image: none;
    background-color:#d0d0d0;
}

Answer 2

I think that radio buttons (like checkboxes, and may be some others) styles cannot be changed because they depend on your navigator and OS. To use your own style, you can create your own radio buttons.

Answer 3

You can apply css to input radio button, but you can't change the background color.

Below code will change the border of radio button.

  <style>
.techRadio {

    outline:solid;
}
</style>
<input type="radio" style="backgroung-color:red" class="techRadio" checked="true" name="techBullet"/>
<input type="radio" class="techRadio" name="techBullet" />
<input type="radio" class="techRadio" name="techBullet" />

Answer 4

You can place your radio buttons inside a div container. Then you can apply your CSS style in that div.

<div class="myDiv">
   <input type="radio" checked="true" name="techBullet"/>
   <input type="radio" name="techBullet" />
   <input type="radio" name="techBullet" />
</div>

In your CSS

.myDiv {
    background: red;
    height: 15px;
}