フレックスボックススタイリングをラジオボタンに適用するにはどうすればいいですか？

Question

フレックスボックスの行には次のようなボックスがあります。

そして、私は彼らがチェックできるように、次のようにラジオボタンのスタイルを設定します。 これは可能ですか？

<ul class="flex-container longhand"> 
    <li class="flex-item">1</li> 
    <li class="flex-item">2</li> 
    <li class="flex-item">3</li> 
    <li class="flex-item">4</li> 
    <li class="flex-item">5</li> 
</ul> 

CSS

.flex-container { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    display: flex; 
} 

.longhand { 
    flex-flow: wrap row; 
} 

.flex-item { 
    color: #C3D0D9; 
    border: 1px solid #C3D0D9; 
    width: 50px; 
    height: 50px; 
    font-size: 1.3em; 
    text-align: center; 
    padding: 10px; 
} 

Answer 1

うん。入力を非表示にしてfor属性を使用してlabelに接続し、labelのスタイルを設定します。

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    display: flex; 
 
} 
 
.longhand { 
 
    flex-flow: wrap row; 
 
} 
 
.flex-item { 
 
    color: #C3D0D9; 
 
    border: 1px solid #C3D0D9; 
 
    width: 50px; 
 
    height: 50px; 
 
    font-size: 1.3em; 
 
    text-align: center; 
 
    padding: 10px; 
 
} 
 
label { 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
input:checked + label { 
 
    background: #eee; 
 
} 
 
input { 
 
    display: none; 
 
}

<ul class="flex-container longhand"> 
 
    <li class="flex-item"><input id="radio1" type="radio" name="radio"><label for="radio1">1</label></li> 
 
    <li class="flex-item"><input id="radio2" type="radio" name="radio"><label for="radio2">2</label></li> 
 
    <li class="flex-item"><input id="radio3" type="radio" name="radio"><label for="radio3">3</label></li> 
 
    <li class="flex-item"><input id="radio4" type="radio" name="radio"><label for="radio4">4</label></li> 
 
    <li class="flex-item"><input id="radio5" type="radio" name="radio"><label for="radio5">5</label></li> 
 
</ul>