Lücke zwischen Rand und untergeordnetem Element mit Randradius

Nov 27 2020

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

2 ArhamChowdhury Nov 27 2020 at 13:23

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

1 TanishSurana Nov 27 2020 at 12:42

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);
  }
LaljiTadhani Nov 27 2020 at 12:57

Wechseln Sie label border-radius 999pxzu35px

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>