How to design a radio button, which looks the sam in Firefox, Chrome and IE11

问题

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 buttons and in IE 11 it seems, that the color and border is not recognized. That is how it should look like.

Taht is how it looks in Chrome

and that is it how it looks like in IE 11

This is my Code, HTML

.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;
}

.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>

How can achieve to get the same design for all browser?

回答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;

回答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

回答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;
}

来源：https://stackoverflow.com/questions/47529361/how-to-design-a-radio-button-which-looks-the-sam-in-firefox-chrome-and-ie11

标签

html

css

internet-explorer

radio-button