Validation style final tweaks

To maximize functionality while adding missing styles, remember this key principle: Don't assume.

This means we can use CSS variables for relative padding, margins, borders, and colors, but we won't dictate the checkbox's appearance. That's a project-level styling decision, not an element-specific one. (Some design systems, like Material Design, heavily style every element, hindering individual component reuse.)

Checkbox Styling

For the checkbox, simply swap the checkbox and label positions. Let the overall project design handle the checkbox's appearance. Two approaches exist: a straightforward method and a more complex one. The complex approach uses CSS like this:

<code class="language-css">.cr-field {
  /* Target previous sibling */
  .cr-label:has(~ [type="checkbox"]) {
    /* Crucial: remove transform in all cases */
    transform: none !important;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding-inline-start: 1.8rem;
    position: relative;
    display: inline-block;
    background: none;
    cursor: pointer;
  }

  .cr-input[type="checkbox"] {
    position: absolute;
    inset-inline-start: 0;
  }
}</code>

A simpler solution involves explicitly assigning a new type property to the cr-field:

<code class="language-html"><!-- input.partial -->
<div class="cr-field cr-checkbox">
  <!-- ... -->
</div></code>

Then, use this less complex CSS:

<code class="language-css">.cr-field.cr-checkbox {
  .cr-label {
    /* Same as above */
  }
  .cr-input {
    /* Same as above */
  }
  .cr-feedback {
    margin-block-start: 0;
    float: none;
  }
  .cr-required {
    position: static;
  }
}</code>

This simpler selector provides more flexibility for styling other elements like required asterisks, help text, and feedback messages. Sometimes, a less intricate approach is better.

Addressing Edge Cases

One scenario involved an obscured required asterisk, positioned far right. Without altering the library component or shared CSS, we can improve its visibility by styling its container:

<code class="language-css">/* Set container width to c-5 and display as block */</code>

This involved:

1. Setting the container's width to a desired percentage and changing its display to block (Angular components default to contents).
2. Adjusting inner component widths to 50% each.
3. Updating the error message to "Add a date in the future," encompassing both expired date and required value rules.

Custom Checkbox Styling

Projects often have unique checkbox styles. Using our existing CSS, let's style a checkbox using an MDN example:

<code class="language-css">.gr-something .cr-field.cr-checkbox {
  .cr-input {
    /* Remove default appearance */
    appearance: none;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    transition: all 0.4s;
  }
  /* ...rest of MDN-based styles... */
}</code>

This demonstrates that avoiding overly complex selectors prevents CSS conflicts.

Hidden and Auto-filled Fields

Hidden inputs simplify validation. If within a cr-field, validation is straightforward. For hidden inputs outside this context, we introduce the type="hidden" attribute and style accordingly:

<code class="language-css">.cr-field.cr-hidden {
  .cr-label {
    display: none;
  }
  .cr-input[required] ~ .cr-required {
    display: none;
  }
  .cr-feedback {
    float: none;
    margin-block-start: 0;
    margin-inline-start: 0;
  }
}</code>

For auto-filled fields, we use type="static" to prevent placeholder label overlap:

<code class="language-css">.cr-field {
  /* Target previous sibling */
  .cr-label:has(~ [type="checkbox"]) {
    /* Crucial: remove transform in all cases */
    transform: none !important;
    inset-block-start: 0;
    inset-inline-start: 0;
    padding-inline-start: 1.8rem;
    position: relative;
    display: inline-block;
    background: none;
    cursor: pointer;
  }

  .cr-input[type="checkbox"] {
    position: absolute;
    inset-inline-start: 0;
  }
}</code>

Conclusion

Our goals were: native HTML inputs, minimal validation rules, a flexible Angular form, attribute-based styling, loose form submission, and minimal, replaceable styling. We believe we've achieved these objectives.

The above is the detailed content of Validation style final tweaks. For more information, please follow other related articles on the PHP Chinese website!