3

これは、bootstrap4 からの新しいチェックボックスです:

<label class="c-input c-checkbox">
    <input type="checkbox">
    <span class="c-indicator"></span>
    Click here
 </label>

デフォルトの<input>チェックボックスはデフォルトで非表示になっており、クリックしたときにのみ表示されます。常に見えるようにする方法はありますか？

フィドル：jsFiddle

編集：これは、デフォルトでどのようにしたいかです。

ここに画像の説明を入力

4

1 に答える 1

5

.c-indicatorこれは、チェックボックス自体がフォーカスされているときに要素に適用されるスタイルです。

.c-input>input:focus~.c-indicator {
  -webkit-box-shadow: 0 0 0 .075rem #fff,0 0 0 .2rem #0074d9;
  box-shadow: 0 0 0 .075rem #fff,0 0 0 .2rem #0074d9;
}

常に適用したい場合は、独自の CSS でそのスタイル宣言を再利用し、.c-input>input:focus~完全に削除します。

.c-indicator {
  -webkit-box-shadow: 0 0 0 .075rem #fff,0 0 0 .2rem #0074d9;
  box-shadow: 0 0 0 .075rem #fff,0 0 0 .2rem #0074d9;
}

JSFiddleを変更しました。

于 2016-01-05T13:31:05.507 に答える