境界線と境界線の半径を持つ子要素の間のギャップ
Nov 27 2020
セグメント化されたコントロールのように機能するラジオボタンを実装しようとしています。
* {
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>
ただし、ネストされたラベルと親divの間には約1pxの厄介なギャップがあります。

この問題はこの質問に似ていますが、背景色を変更できないため、提案された回避策は私のユースケースでは実際には機能しません。これがブラウザのバグなのか、アンチエイリアシングの問題なのか、私も興味があります。
回答
2 ArhamChowdhury Nov 27 2020 at 13:23
入力にボックスシャドウを追加するだけです:チェック+ラベル
input:checked + label {
background-color: skyblue;
box-shadow: 0px 0px 0 1px skyblue;
}
Jsfiddleへのリンク
1 TanishSurana Nov 27 2020 at 12:42
1ピクセルのギャップが発生する理由はわかりませんが、「transform:translateX(-1px);」を追加できます。左に1pxシフトします。これは一時的な解決策として機能します。
label {
flex: 1;
padding: 2rem;
border-radius: 200px;
text-align: center;
transform: translateX(-1px);
}
LaljiTadhani Nov 27 2020 at 12:57
変更label
border-radius
999px
へ35px
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>