検証スタイルの最終調整

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

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

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

チェックボックスの場合は、チェックボックスとラベルの位置を交換するだけです。プロジェクト全体のデザインでチェックボックスの外観を処理します。 単純な方法とより複雑な方法の 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;
  }
}

より簡単な解決策には、新しい型プロパティを 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;
  }
}

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

エッジケースへの対処

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

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

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

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

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

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

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

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

非表示フィールドと自動入力フィールド

非表示の入力により検証が簡素化されます。 cr-field 内にある場合、検証は簡単です。このコンテキスト外の非表示の入力については、 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;
  }
}

自動入力フィールドの場合、プレースホルダー ラベルの重複を防ぐために 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;
  }
}

結論

私たちの目標は、ネイティブ HTML 入力、最小限の検証ルール、柔軟な Angular フォーム、属性ベースのスタイル、緩やかなフォーム送信、および最小限の置換可能なスタイルです。 私たちはこれらの目標を達成したと信じています。

以上が検証スタイルの最終調整の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。