How to design a radio button, which looks the sam

2019-07-28 10:46发布

站内文章 / HTML/CSS
38 0 0

问题:

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


标签： html css internet-explorer radio-button
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~