Blauen Rahmen von Checkbox deaktivieren wenn diese aktiv ist
Hallo zusammen,
ich möchte gerne den blauen Rahmen von einer Checkbox deaktivieren, wenn diese aktiv ist. Meine Versuche dies mit "opacity oder outline" zu erreichen sind leider alle gescheitert. Nur der Edge Browser zeigt diesen Rahmen nicht an, aber alle anderen getesteten Browser wie Chrome, Opera, Firefox und Edge Chromium zeigen diesen Rahmen allesamt an. Gibt es hierfür eine passende Lösung, damit dieser blaue Rahmen nicht mehr angezeigt wird.
Für entsprechende Lösungen oder Tipps wäre ich sehr dankbar.
Mein verwendeter Code für die Checkbox.
Code:
fieldset input[type="checkbox"] {
opacity:0;
}
fieldset label {
position: relative;
display: inline-block;
padding:1px 0 0 24px;
}
fieldset label::before,
fieldset label::after {
position: absolute;
content:"";
display:inline-block;
outline:0;
}
fieldset label::before {
height:11px;
width:11px;
top:0;
left:0;
content:"";
margin-left:4px;
background-color:#ffffe1;
border:1px solid #707070;
}
fieldset input[type="checkbox"]:focus + label::before {
outline:rgb(59, 153, 252) auto 5px;
}
fieldset input[type="checkbox"] + label::after {
content:none;
}
fieldset input[type="checkbox"]:checked + label::after {
content:"\f00c";
font-family:FontAwesome;
font-size:10px;
top:1.5px;
left:6px;
outline:0;
}
Danke!
Gruß
Thomas
