要在添加缺失樣式的同時(shí)最大化功能，請(qǐng)記住以下關(guān)鍵原則：不要假設(shè)。

這意味著我們可以使用 CSS 變量來設(shè)置相對(duì)填充、邊距、邊框和顏色，但我們不會(huì)指定復(fù)選框的外觀。這是項(xiàng)目級(jí)別的樣式?jīng)Q策，而不是特定于元素的決策。 （一些設(shè)計(jì)系統(tǒng)，例如 Material Design，對(duì)每個(gè)元素都進(jìn)行了嚴(yán)格的樣式設(shè)計(jì)，從而阻礙了單個(gè)組件的重用。）

復(fù)選框樣式

對(duì)于復(fù)選框，只需交換復(fù)選框和標(biāo)簽位置即可。讓整個(gè)項(xiàng)目設(shè)計(jì)來處理復(fù)選框的外觀。 存在兩種方法：一種簡(jiǎn)單的方法和一種更復(fù)雜的方法。 復(fù)雜的方法使用 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;
  }
}

一個(gè)更簡(jiǎn)單的解決方案涉及顯式地將新類型屬性分配給 cr-field:

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

然后，使用這個(gè)不太復(fù)雜的 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;
  }
}

這個(gè)更簡(jiǎn)單的選擇器為其他元素的樣式提供了更大的靈活性，例如所需的星號(hào)、幫助文本和反饋消息。 有時(shí)，不太復(fù)雜的方法會(huì)更好。

解決邊緣情況

一個(gè)場(chǎng)景涉及一個(gè)模糊的必需星號(hào)，位于最右側(cè)。 在不更改庫組件或共享 CSS 的情況下，我們可以通過設(shè)置其容器的樣式來提高其可見性：

/* Set container width to c-5 and display as block */

這涉及：

1. 將容器的寬度設(shè)置為所需的百分比并將其顯示更改為 block（Angular 組件默認(rèn)為 contents）。
2. 將內(nèi)部組件寬度調(diào)整為每個(gè) 50%。
3. 將錯(cuò)誤消息更新為“添加未來日期”，包含過期日期和所需值規(guī)則。

自定義復(fù)選框樣式

項(xiàng)目通常具有獨(dú)特的復(fù)選框樣式。 使用我們現(xiàn)有的 CSS，讓我們使用 MDN 示例來設(shè)置復(fù)選框的樣式：

.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... */
}

這表明避免過于復(fù)雜的選擇器可以防止 CSS 沖突。

隱藏和自動(dòng)填充字段

隱藏輸入簡(jiǎn)化了驗(yàn)證。 如果在 cr-field 內(nèi)，驗(yàn)證就很簡(jiǎn)單。對(duì)于此上下文之外的隱藏輸入，我們相應(yīng)地引入 type="hidden" 屬性和樣式：

.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;
  }
}

對(duì)于自動(dòng)填充字段，我們使用 type="static" 來防止占位符標(biāo)簽重疊：

.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;
  }
}

結(jié)論

我們的目標(biāo)是：原生 HTML 輸入、最少的驗(yàn)證規(guī)則、靈活的 Angular 表單、基于屬性的樣式、松散的表單提交以及最小的可替換樣式。 我們相信我們已經(jīng)實(shí)現(xiàn)了這些目標(biāo)。

以上是驗(yàn)證風(fēng)格最終調(diào)整的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！