驗證風格最終調整

要在添加缺失樣式的同時最大化功能，請記住以下關鍵原則：不要假設。

這意味著我們可以使用 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中文網其他相關文章！