如何设计一个单选按钮，在Firefox，Chrome和IE11中看起来像山姆 [英] How to design a radio button, which looks the sam in Firefox, Chrome and IE11
本文介绍了如何设计一个单选按钮，在Firefox，Chrome和IE11中看起来像山姆的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想设计一组单选按钮，在Chrome，Firefox和IE 11中看起来应该是相同的。我的解决方案在Firefox中看起来很不错。在Chrome中，按钮周围有一个蓝色框，在IE 11中，似乎无法识别颜色和边框。
这就是它的样子。
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是它在Chrome中的样子
Taht is how it looks in Chrome
就是它在IE 11中的样子
and that is it how it looks like in IE 11
这是我的代码，HTML
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?
推荐答案
为IE11添加此项，使用 :: - ms-check
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;
这篇关于如何设计一个单选按钮，在Firefox，Chrome和IE11中看起来像山姆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
