验证风格最终调整

要在添加缺失样式的同时最大化功能，请记住以下关键原则：不要假设。

这意味着我们可以使用 CSS 变量来设置相对填充、边距、边框和颜色，但我们不会指定复选框的外观。这是项目级别的样式决策，而不是特定于元素的决策。 （一些设计系统，例如 Material Design，对每个元素都进行了严格的样式设计，从而阻碍了单个组件的重用。）

复选框样式

对于复选框，只需交换复选框和标签位置即可。让整个项目设计来处理复选框的外观。 存在两种方法：一种简单的方法和一种更复杂的方法。 复杂的方法使用 CSS，如下所示：

<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>

一个更简单的解决方案涉及显式地将新类型属性分配给 cr-field:

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

然后，使用这个不太复杂的 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>

这个更简单的选择器为其他元素的样式提供了更大的灵活性，例如所需的星号、帮助文本和反馈消息。 有时，不太复杂的方法会更好。

解决边缘情况

一个场景涉及一个模糊的必需星号，位于最右侧。 在不更改库组件或共享 CSS 的情况下，我们可以通过设置其容器的样式来提高其可见性：

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

这涉及：

1. 将容器的宽度设置为所需的百分比并将其显示更改为 block（Angular 组件默认为 contents）。
2. 将内部组件宽度调整为每个 50%。
3. 将错误消息更新为“添加未来日期”，包含过期日期和所需值规则。

自定义复选框样式

项目通常具有独特的复选框样式。 使用我们现有的 CSS，让我们使用 MDN 示例来设置复选框的样式：

<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>

这表明避免过于复杂的选择器可以防止 CSS 冲突。

隐藏和自动填充字段

隐藏输入简化了验证。 如果在 cr-field 内，验证就很简单。对于此上下文之外的隐藏输入，我们相应地引入 type="hidden" 属性和样式：

<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>

对于自动填充字段，我们使用 type="static" 来防止占位符标签重叠：

<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>

结论

我们的目标是：原生 HTML 输入、最少的验证规则、灵活的 Angular 表单、基于属性的样式、松散的表单提交以及最小的可替换样式。 我们相信我们已经实现了这些目标。

以上是验证风格最终调整的详细内容。更多信息请关注PHP中文网其他相关文章！