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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Title</title>
    <link rel = "stylesheet" href = "test.css">
</head>
<body>
<div class="radiobuttons">
    <div class="radiogroup">
        <input class="radiobtn" type="radio" id="mc" name="Zahlmethode" value="Mastercard" >
        <label class="radiolabel" for="mc"> Mastercard</label><br>
    </div>
    <div class="radiogroup">
        <input class="radiobtn" type="radio" id="vi" name="Zahlmethode" value="Visa">
        <label class="radiolabel" for="vi"> Visa</label><br>
    </div>
    <div class="radiogroup">
        <input class="radiobtn" type="radio" id="ae" name="Zahlmethode" value="AmericanExpress">
        <label class="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;
}

label input {
  display: none;
}

label {
  display: block;
}

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

label input:checked~.fa-check-circle-o {
  display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<label>
  <input type="radio" name="card" />
  <i class="fa fa-circle-o"></i>
  <i class="fa fa-check-circle-o"></i>
  Mastercard
</label>
<label>
  <input type="radio" name="card" />
  <i class="fa fa-circle-o"></i>
  <i class="fa fa-check-circle-o"></i>
  Visa
</label>
<label>
  <input type="radio" name="card" />
  <i class="fa fa-circle-o"></i>
  <i class="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;
}

You may like these posts

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