チェックボックスとラベルの間のパディング 質問する

チェックボックスとラベルの間のパディング 質問する

CSS の専門家にとって、このマークアップはチェックボックスとValue1その右側のラベルを出力しますが、Value1チェックボックスに近すぎます。

<dd id="rr-element">
   <label for="rr-1">
      <input type="checkbox" value="1" id="rr-1" name="rr[]">
      Value 1
   </label>
</dd>

チェックボックスの右側にエフェクトを作成しようとしていますpadding-rightが、うまくいきません。チェックボックスとラベルが一緒に移動します。チェックボックスのみ、またはそのテキストのみをターゲットにして、パディングギャップを作成するにはどうすればよいでしょうか?

dd label input {
   padding-right:100px;
}

ベストアンサー1

要素内でmargin-right.を使用すると、入力要素は OS のネイティブ入力コンポーネントを使用してレンダリングされるため、おかしな動作をすることがよくあり、一般的にカスタマイズが面倒になります。padding

JSFiddleここ

おすすめ記事