How to change the radio button color in Explorer?

Question

     input[type='radio'] {
        -webkit-appearance: none;
        width: 13px;
        height: 13px;
        border-radius: 50% !important;
        border: 1px solid darkgray;
        outline: none;
        box-shadow: 0 0 5px 0px gray inset !important;
    }

        input[type='radio']:before {
            content: '';
            display: block;
            width: 60%;
            height: 60%;
            margin: 20% auto;
            border-radius: 50% !important;
        }

        input[type='radio']:checked:before {
            background: #0073CF !important;
        }

0073CF color is applying in chrome and firefox. not applying in Explorer . How i will solve it.

        <asp:RadioButton ID="grdSelect" GroupName="Name" CssClass="gridRadioButton"  runat="server" ItemStyle-Width="10%"></asp:RadioButton>

This is my asp.net button

In internet explorer it takes default color black.How will i change the color into blue?

score 3 · Answer 1 · answered Jan 13 '16 at 07:28

According to the specs, the :before and :after styles aren't supposed to work with input elements.

Chrome does support it anyway, which is why your code works, but other browsers do not. Please understand that this is not a fault in the other browsers; they are following the spec correctly. It is Chrome that is going beyond the correct behavior.

The correct way to get the effect you're looking for is to have a label elements associated with the radio button, and to style that in the same way as you are currently doing for your :before pseudo-element.

score 2 · Answer 2 · answered Jan 13 '16 at 07:22

.customRadio > div {width:250px;float:left;}
.customRadio input.radio:empty {display:none;}
.customRadio input.radio:empty ~ label {
 position: relative;
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 padding-left:27px;}
.customRadio input.radio:empty ~ label:before {
 position: absolute;
 display: block;
 top: 0;
 bottom: 0;
 left: 0;
 content: '';
 width: 20px;
 height:20px;
 border:solid 2px #fff;
 border-radius: 50%;
 -webkit-transition:background-color 0.4s linear;
 -o-transition:background-color 0.4s linear;
 -moz-transition:background-color 0.4s linear;
 transition:background-color 0.4s linear;}
.customRadio input.radio:hover:not(:checked) ~ label:before {
 color: #C2C2C2;}
.customRadio input.radio:hover:not(:checked) ~ label {
 color: #888;}
.customRadio input.radio:checked ~ label:before {
 color: #9CE2AE;
 background-color: #ff9933;}

<div class="customRadio">
 <div class="">
  <input type="radio" name="radio" id="radio1" class="radio" checked/>
  <label for="radio1">Yes</label>
 </div>
 <div class="">
  <input type="radio" name="radio" id="radio2" class="radio"/>
  <label for="radio2">No</label>
 </div>
</div>

I've upvoted you, but I think you've over-complicated your code example. A simple example to demonstrate the technique doesn't need all the fluff of transitions and user-select; they just make it look more complex than it really is. — Simba, Jan 13 '16 at 10:29

score 1 · Answer 3 · answered Jan 13 '16 at 07:21

The styling capabilities given to radio button are very limited and only webkit browsers will recognize your custom style. You also have to take note that safari and touch screen browsers look quite different.

For cross browsers support, you can use this online generator, upload your custom image then download and apply to your page. http://www.csscheckbox.com/css-checkbox-generator.php

Good thing is that it provides support for crappy IE browser as well.

score -2 · Accepted Answer · answered Jan 13 '16 at 07:07

-2

Styling a radio button with css only works for webkit browsers. You have to use a JS library if you want to style a Radio button in IE.

answered Jan 13 '16 at 07:07

Charly H

147
9

How to use JS Library. I have already used ../js/jquery-1.11.3.min.js. js file. – josna Jan 13 '16 at 07:10
2

This is not true -- it's perfectly possible to style a radio button without JS; you just have to have a `` element. See http://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label – Simba Jan 13 '16 at 10:26

How to change the radio button color in Explorer?

4 Answers4