CSS https://gnuschichten.de/ de CSS Checkboxen und Input Styles https://gnuschichten.de/snippets/checkbox-pure-css <span class="field field--name-title field--type-string field--label-hidden">CSS Checkboxen und Input Styles</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="https://gnuschichten.de/user/6" typeof="schema:Person" property="schema:name" datatype="" xml:lang="">Holger Weischenberg</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mo., 16.11.2020 - 10:33</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>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).<br /> <br /> Die wpforms Klassen beziehen sich auf ein WordPress Plugin und müssen ersetzt werden.</p> <pre> <code class="language-css">// 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; } }</code></pre> <p>Weiterführende Links:<br /> <a href="https://boolie.org/css-checkbox-styling/">boolie.org/css-checkbox-styling</a></p> <p><a href="https://codepen.io/bbodine1/pen/novBm">codepen.io/bbodine1/pen/novBm</a><br />  </p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-above"> <div class="field__label">Tags</div> <div class="field__items"> <div class="field__item"><a href="https://gnuschichten.de/taxonomy/term/9" hreflang="de">SCSS</a></div> <div class="field__item"><a href="https://gnuschichten.de/taxonomy/term/8" hreflang="de">CSS</a></div> <div class="field__item"><a href="https://gnuschichten.de/taxonomy/term/16" hreflang="de">Checkbox</a></div> <div class="field__item"><a href="https://gnuschichten.de/taxonomy/term/17" hreflang="de">Input</a></div> </div> </div> Mon, 16 Nov 2020 09:33:12 +0000 Holger Weischenberg 15 at https://gnuschichten.de CSS/SCSS Notizzettel https://gnuschichten.de/blog/css-snippets <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">CSS/SCSS Notizzettel</span> <span rel="schema:author" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="https://gnuschichten.de/user/6" typeof="schema:Person" property="schema:name" datatype="" xml:lang="">Holger Weischenberg</span></span> <span property="schema:dateCreated" content="2019-11-21T08:42:19+00:00" class="field field--name-created field--type-created field--label-hidden">Do., 21.11.2019 - 09:42</span> Thu, 21 Nov 2019 08:42:19 +0000 Holger Weischenberg 3 at https://gnuschichten.de