我想设计一组单选按钮，它们在 Chrome、Firefox 和 IE 11 中看起来应该相同。我的解决方案在 Firefox 中看起来相当不错。在 Chrome 中，按钮周围有一个蓝色框，而在 IE 11 中，颜色和边框似乎无法识别。
它应该是这样的。
这就是 Chrome 中的样子
这就是 IE 11 中的样子
这是我的代码，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>
如何实现所有浏览器获得相同的设计？
IE11添加这个，用过::-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>
另外，如果您想要大纲，请添加
outline: dotted 1px;
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
