Bootstrap form extensions 🫠

bootstrap.forms.extra.css

/* Default style extends .5em of empty space */
.form-switch {
  padding-left: 2em;
}
.form-switch .form-check-input {
  margin-left: -2em;
}

/* Bootstrap default switch input assumes extra valence in on state */
.form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-color: #fff;
  border-color: rgba(0, 0, 0, 0.25);
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
}

/* Stacking order of sequential relative input containers overlaps antecedent focus style */
.form-floating:focus-within {
  z-index: 1;
}

/* If a form control element is not an input, assume it's shadowing an internal input */
.form-control-proxy {
  cursor: text;
}
.form-control-proxy:focus-within {
  color: #212529;
  background-color: #fff;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}
.form-control-proxy input {
  border: none;
  outline: none;
}