CSS Checkboxen und Input Styles

Holger Weischenberg — Mon, 16 Nov 2020 09:33:12 +0000

CSS Checkboxen und Input Styles Holger Weischenberg Mo., 16.11.2020 - 10:33

Die Checkbox Styles, wenn input und label Siblings sind. Außerdem Placeholder anpassen, nebst den Opacity-Fix für den Firefox (wird im Browser-Standard mit geringer Deckkraft dargestellt) und hervorhebende Styles, wenn der User ein Input-Feld auswählt (focus-within).

Die wpforms Klassen beziehen sich auf ein WordPress Plugin und müssen ersetzt werden.

// Placeholder und Input focus Styles
input::placeholder,
textarea::placeholder {
  color: $dark-grey;
  opacity: 0.8;
}

div.wpforms-container-full .wpforms-form {
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="email"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="range"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="time"],
  input[type="url"],
  input[type="week"],
  select,
  textarea {
    border-radius: 1rem;
    border: 1px solid $dark-grey;
    box-shadow: inset 0 0 0.3rem 0 rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
  }

  input:focus-within,
  textarea:focus-within {
    border: 1px solid $primary-color;
    box-shadow: inset 0 0 0.3rem 0 rgba($primary-color, 0.5);
  }

  // nur relevant falls div nicht auf inline-block gesetzt ist
  .wpforms-field-label-inline {
    display: inline-block;
  }

 // Checkbox Styles
  input[type="checkbox"] {
    display: none;
  }

  input[type="checkbox"] + label::before {
    width: 1.8rem;
    height: 1.8rem;
    background-color: $white;
    display: block;
    content: "";
    float: left;
    margin-right: 1.3rem;
    border: 2px solid $dark-grey;
    transition: all 0.5s;
    border-radius: 3px;
  }

  input[type="checkbox"]:checked + label::before {
    background-color: $primary-color;
    background-image: url("./img/checkmark.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid $primary-color;
  }
}

Weiterführende Links:
boolie.org/css-checkbox-styling

codepen.io/bbodine1/pen/novBm