gpt4 book ai didi

html - 如何设计一个在 Firefox、Chrome 和 IE11 中看起来一样的单选按钮

转载 作者:行者123 更新时间:2023-11-28 00:50:49 26 4
gpt4 key购买 nike

我想设计一组在 Chrome、Firefox 和 IE 11 中看起来应该相同的单选按钮。我的解决方案在 Firefox 中看起来很不错。在 Chrome 中,按钮周围有一个蓝色框,而在 IE 11 中,颜色和边框似乎无法识别。它应该是这样的。

enter image description here

这就是它在 Chrome 中的样子

enter image description here

这就是它在 IE 11 中的样子

enter image description here

这是我的代码,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;

关于html - 如何设计一个在 Firefox、Chrome 和 IE11 中看起来一样的单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47529361/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com