CODEWITHSUNDEEP
twitter-bootstrapcsstwitter-bootstrap-4bootstrap-4
Zeeshan
Zeeshan

Reputation: 12421

Make checkbox always visible in Bootstrap 4

Here is the new checkbox from bootstrap4 : Bootstrap4 checkbox:

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

The default <input> checkbox is hidden by default, it is visible only on click. Is there a way to make it always visible.

Fiddle : jsFiddle

Edit : This is how I want it to be by default.

enter image description here

Upvotes: 3

Views: 1188

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

That's the style applied to the .c-indicator element when the checkbox itself is focused:

.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;
}

If you want to have that apply at all times, simply reuse that style declaration in your own CSS, dropping the .c-input>input:focus~ completely:

.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;
}

Modified JSFiddle.

Upvotes: 5

Related Questions