カスタムラジオボタンとラベルを列として整列する

Question

spanを複数含むlabel要素の横に独自の列としてカスタムラジオボタンを配置しようとしています。デフォルトのラジオボタンで実現するのは簡単ですが、カスタムスタイルはlabel:beforeに適用されるため、同じ動作をしません。

<div class="sp-package-show"> 
    <input type="radio" name="" value=""> 
    <label> 
    <span>Title</span> 
    <span>Date</span> 
    </label> 
</div> 

[type="radio"] { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 

label { 
    cursor: pointer; 
} 

[type="radio"] + label { 
    display: block; 
    margin-left: 1px; 
    vertical-align: middle; 
} 

[type="radio"] + label:before { 
    content: ''; 
    display: inline-block; 
    width: 1.1em; 
    height: 1.1em; 
    vertical-align: inherit; 
    border-radius: 1em; 
    // border: 0.15em solid $gray; 
    box-shadow: 0 0 0 1px gray; 
    margin-right: 0.75em; 
} 

[type="radio"]:checked + label:before { 
    box-shadow: 0 0 0 0.05em gray; 
    background-color: gray; 
} 

デモ：https://codepen.io/ourcore/pen/mwRdbx

Answer 1

あなたはlabelのフレックス子どもたちが自分のspan Sをラップ:before要素と要素となるように、別の要素であなたのspan Sをラップその後、labeldisplay: flexを作ることができます。それはそれらを隣の列に置きます。スパンを独自の行に表示するには、display: blockを使用します。

[type="radio"] { 
 
    border: 0; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
} 
 

 
label { 
 
    cursor: pointer; 
 
} 
 

 
[type="radio"] + label { 
 
    margin-left: 1px; 
 
    display: flex; 
 
} 
 

 
[type="radio"] + label:before { 
 
    content: ''; 
 
    width: 1.1em; 
 
    height: 1.1em; 
 
    border-radius: 1em; 
 
    box-shadow: 0 0 0 1px gray; 
 
    margin-right: 0.75em; 
 
} 
 

 
[type="radio"]:checked + label:before { 
 
    box-shadow: 0 0 0 0.05em gray; 
 
    background-color: gray; 
 
} 
 

 
span { 
 
    display: block; 
 
}

<input type="radio" name="" value=""> 
 
<label> 
 
<div class="meta"> <span>Title</span> 
 
    <span>Date</span> 
 
    <span>Date</span> 
 
    <span>Date</span> 
 
    <span>Date</span> 
 
    <span>Date</span> 
 
    <span>Date</span> 
 
    </div> 
 
</label>