不足しているスタイルを追加しながら機(jī)能を最大化するには、次の重要な原則を覚えておいてください: 思い込みはしないでください。

これは、相対的なパディング、マージン、境界線、および色に CSS 変數(shù)を使用できることを意味しますが、チェックボックスの外観は指定しません。これは、要素固有の決定ではなく、プロジェクト レベルのスタイル決定です。 (マテリアル デザインなどの一部のデザイン システムでは、すべての要素のスタイルが厳しく設(shè)定され、個(gè)々のコンポーネントの再利用が妨げられます。)

チェックボックスのスタイル

チェックボックスの場(chǎng)合は、チェックボックスとラベルの位置を交換するだけです。プロジェクト全體のデザインでチェックボックスの外観を処理します。 単純な方法とより複雑な方法の 2 つのアプローチが存在します。 複雑なアプローチでは、次のように 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;
  }
}

より簡(jiǎn)単な解決策には、新しい型プロパティを cr-field:

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

次に、次のそれほど複雑ではない 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;
  }
}

このシンプルなセレクターにより、必須のアスタリスク、ヘルプ テキスト、フィードバック メッセージなどの他の要素のスタイルをより柔軟に設(shè)定できます。 場(chǎng)合によっては、あまり複雑でないアプローチの方が良い場(chǎng)合もあります。

エッジケースへの対処

1 つのシナリオには、右端にある隠された必須のアスタリスクが含まれていました。 ライブラリ コンポーネントや共有 CSS を変更せずに、コンテナのスタイルを設(shè)定することで可視性を向上させることができます。

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

これには以下が関係します:

1. コンテナの幅を希望のパーセンテージに設(shè)定し、その表示を block に変更します (Angular コンポーネントのデフォルトは contents)。
2. 內(nèi)部コンポーネントの幅をそれぞれ 50% に調(diào)整します。
3. エラー メッセージを「將來(lái)の日付を追加してください」に更新し、有効期限切れの日付と必須の値のルールの両方を含めます。

カスタムチェックボックスのスタイル

プロジェクトには、多くの場(chǎng)合、獨(dú)自のチェックボックス スタイルがあります。 既存の CSS を使用して、MDN の例を使用してチェックボックスのスタイルを設(shè)定してみましょう:

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

これは、過(guò)度に複雑なセレクターを避けることで CSS の競(jìng)合が防止されることを示しています。

非表示フィールドと自動(dòng)入力フィールド

非表示の入力により検証が簡(jiǎn)素化されます。 cr-field 內(nèi)にある場(chǎng)合、検証は簡(jiǎn)単です。このコンテキスト外の非表示の入力については、 type="hidden" 屬性とそれに応じたスタイルを?qū)毪筏蓼埂?/p>

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

自動(dòng)入力フィールドの場(chǎng)合、プレースホルダー ラベルの重複を防ぐために type="static" を使用します。

.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 入力、最小限の検証ルール、柔軟な Angular フォーム、屬性ベースのスタイル、緩やかなフォーム送信、および最小限の置換可能なスタイルです。 私たちはこれらの目標(biāo)を達(dá)成したと信じています。

以上が検証スタイルの最終調(diào)整の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。