Lücke zwischen Rand und untergeordnetem Element mit Randradius
Ich versuche, Optionsfelder zu implementieren, die wie segmentierte Steuerelemente funktionieren:
* {
margin: 0;
padding: 0;
}
.container {
background-color: brown;
width: 80vw;
}
.box {
display: flex;
flex-direction: row;
border: 2rem solid skyblue;
border-radius: 999px;
}
label {
flex: 1;
padding: 2rem;
border-radius: 999px;
text-align: center;
}
input {
display: none;
}
input:checked + label {
background-color: skyblue;
}
<div class="container">
<div class="box">
<input type="radio" id="hello" name="test" checked />
<label for="hello">Hello</label>
<input type="radio" id="world" name="test" />
<label for="world">World</label>
</div>
</div>
Es gibt jedoch eine ärgerliche Lücke von ungefähr 1 Pixel zwischen dem verschachtelten Label und dem übergeordneten div:

Dieses Problem ähnelt dieser Frage , aber die vorgeschlagenen Problemumgehungen funktionieren für meinen Anwendungsfall nicht wirklich, da ich die Hintergrundfarbe nicht ändern kann. Ich bin auch neugierig, ob dies ein Browserfehler oder eine Art Anti-Aliasing-Problem ist.
Antworten
Fügen Sie der Eingabe einfach einen Feldschatten hinzu: Häkchen + Beschriftung
input:checked + label {
background-color: skyblue;
box-shadow: 0px 0px 0 1px skyblue;
}
Link zu Jsfiddle
Ich weiß nicht, warum Sie diese 1-Pixel-Lücke bekommen, aber Sie können "transform: translateX (-1px)" hinzufügen. um es um 1px nach links zu verschieben. Dies kann als temporäre Lösung funktionieren.
label {
flex: 1;
padding: 2rem;
border-radius: 200px;
text-align: center;
transform: translateX(-1px);
}
Wechseln Sie label
border-radius
999px
zu35px
label {
flex: 1;
padding: 2rem;
border-radius: 35px;
text-align: center;
}
* {
margin: 0;
padding: 0;
}
.container {
background-color: brown;
width: 80vw;
}
.box {
display: flex;
flex-direction: row;
border: 2rem solid skyblue;
border-radius: 999px;
}
label {
flex: 1;
padding: 2rem;
border-radius: 35px;
text-align: center;
}
input {
display: none;
}
input:checked + label {
background-color: skyblue;
}
<div class="container">
<div class="box">
<input type="radio" id="hello" name="test" checked />
<label for="hello">Hello</label>
<input type="radio" id="world" name="test" />
<label for="world">World</label>
</div>
</div>