Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Internet Explorer / Radio Button

How To Design A Radio Button, Which Looks The Sam In Firefox, Chrome And Ie11

Post a Comment
I want to design a group of Radio buttons which should look the same in Chrome, Firefox and IE 11. My solution looks pretty fine in Firefox. In Chrome there is a blue box round the

Solution 1:

Add this for IE11, used ::-ms-check

/* fallback for  IE11 */.radiobtn[type="radio"]:checked::-ms-check {
    border: 2px solid green;
    color: green;
    opacity: 1;
}


.radiobuttons{
    background-color: white;
    font: 16px Arial, sans-serif;
}
.radiolabel{
    font: 16px Arial, sans-serif;
    color: #000000;
    opacity: 0.9;
}

.radiobtn[type="radio"] {

    /* remove standard background appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    /* create custom radiobutton appearance */display: inline-block;
    width: 25px;
    height: 25px;
    padding: 4px;
    /* background-color only for content */background-clip: content-box;
    border: 2px solid #000000;
    opacity: 0.4;
    border-radius: 50%;
    vertical-align: bottom;
}

/* appearance for checked radiobutton */.radiobtn[type="radio"]:checked {
    background-color: green;
    border: 2px solid green;
    opacity: 1;
}
.radiobtn[type="radio"]:checked::-ms-check {
    border: 2px solid green;
    color: green;
    opacity: 1;
}

.radiogroup {
    vertical-align: middle;
    margin-bottom: 20px;
}
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge" /><title>Title</title><linkrel = "stylesheet"href = "test.css"></head><body><divclass="radiobuttons"><divclass="radiogroup"><inputclass="radiobtn"type="radio"id="mc"name="Zahlmethode"value="Mastercard" ><labelclass="radiolabel"for="mc"> Mastercard</label><br></div><divclass="radiogroup"><inputclass="radiobtn"type="radio"id="vi"name="Zahlmethode"value="Visa"><labelclass="radiolabel"for="vi"> Visa</label><br></div><divclass="radiogroup"><inputclass="radiobtn"type="radio"id="ae"name="Zahlmethode"value="AmericanExpress"><labelclass="radiolabel"for="ae"> American Express</label></div></div></body>

Also if you want the outline as well add

outline: dotted 1px;

Solution 2:

This is not cross-browser compatible plus it's not good to use vendor prefixes for the long run, especially the below code:

-webkit-appearance: none;
-moz-appearance: none;

Instead, you may want to use a font icon replacement or a normal SVG icon background for a <span> or similar element this way:

.fa-check-circle-o {
  color: orangered;
}

labelinput {
  display: none;
}

label {
  display: block;
}

labelinput:checked~.fa-circle-o,
labelinput~.fa-check-circle-o {
  display: none;
}

labelinput:checked~.fa-check-circle-o {
  display: inline-block;
}
<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /><label><inputtype="radio"name="card" /><iclass="fa fa-circle-o"></i><iclass="fa fa-check-circle-o"></i>
  Mastercard
</label><label><inputtype="radio"name="card" /><iclass="fa fa-circle-o"></i><iclass="fa fa-check-circle-o"></i>
  Visa
</label><label><inputtype="radio"name="card" /><iclass="fa fa-circle-o"></i><iclass="fa fa-check-circle-o"></i>
  American Express
</label>

Browser Compatibility

I wrote this snippet just for this answer. This solution is perfectly cross browser compatible between any of the following browsers:

  • Safari
  • Internet Explorer 7+
  • Mozilla Firefox
  • Google Chrome
  • Opera

Preview

preview

Solution 3:

For Chrome/Opera you can just add 

.radiobtn:focus { outline: none; }

to remove that blue box around checkbox. In case of IE 11 this can be the solution:

.radiobtn[type="radio"]:checked::-ms-check{
border: 2px solid green;
color:green;
}

Post a Comment for "How To Design A Radio Button, Which Looks The Sam In Firefox, Chrome And Ie11"