I am looking to create a set of Radio buttons that will display consistently across Chrome, Firefox, and IE 11. My current solution appears to work well in Firefox, but in Chrome, there is a blue box around the buttons, and in IE 11, it seems that the color and border properties are not being recognized. This is the desired appearance:
https://i.sstatic.net/ylWvW.png
This is how it appears in Chrome:
https://i.sstatic.net/bkdvg.png
And this is how it looks in IE 11:
https://i.sstatic.net/WGqrb.png
Below is the HTML code that I am using:
.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 I ensure that the design remains consistent across all browsers?