How to design a radio button, which looks the sam

2019-07-28 10:43发布

站内问答 / HTML/CSS
1812 3 5

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.

enter image description here

Taht is how it looks in Chrome

enter image description here

and that is it how it looks like in IE 11

enter image description here

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?

3条回答
Luminary・发光体
2楼-- · 2019-07-28 10:50

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;
}
查看更多
0人赞 添加讨论(0) 举报
\"骚年 ilove
3楼-- · 2019-07-28 10:58

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;
查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
4楼-- · 2019-07-28 11:00

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)