ホームページ ウェブフロントエンド htmlチュートリアル 入力が疑似要素をサポートしないのはなぜですか?

入力が疑似要素をサポートしないのはなぜですか?

Oct 12, 2023 am 11:54 AM
擬似要素 input

input は内容のない自己終了タグであるため、input は擬似要素をサポートしません。疑似要素を使用すると、生成されたコンテンツを要素のコンテンツの前後に挿入できますが、input 要素はユーザー入力を受け取るために使用されるフォーム コントロールであり、そのコンテンツはユーザーによって入力され、CSS を介して生成またはスタイル設定することはできません。したがって、input 要素には、選択およびスタイルを設定するための疑似要素のコンテンツがないため、疑似要素はサポートされません。

入力が疑似要素をサポートしないのはなぜですか?

# このチュートリアルのオペレーティング システム: Windows 10 システム、Dell G3 コンピューター。

input 要素は、HTML フォーム内のフォーム コントロールであり、ユーザー入力を受け取るために使用されます。これはコンテンツを持たない自己終了タグであるため、疑似要素はサポートされていません。

疑似要素は、`::before` や `::after` など、CSS 内の要素を選択してスタイル設定するために使用される特別なセレクターです。疑似要素を使用すると、生成されたコンテンツを要素のコンテンツの前後に挿入できます。

input 要素は、ユーザー入力を受け取るために使用されるフォーム コントロールです。その内容はユーザーによって入力され、CSS を通じて生成またはスタイル設定することはできません。したがって、input 要素には、選択およびスタイルを設定するための疑似要素のコンテンツがないため、疑似要素はサポートされません。

input 要素のスタイルを設定する場合は、CSS セレクターと属性セレクターを使用して、`` 要素自体またはその親要素を選択し、スタイルを設定できます。例:

input[type="text"] {
  /* 样式化文本输入框 */
  /* ... */
}
input[type="submit"] {
  /* 样式化提交按钮 */
  /* ... */
}
ログイン後にコピー

セレクターと属性セレクターを使用して、さまざまなタイプの入力要素を異なるスタイルで設定できます。

以上が入力が疑似要素をサポートしないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

vue3 で入力コンポーネントと統合フォームデータをカプセル化する方法 vue3 で入力コンポーネントと統合フォームデータをカプセル化する方法 May 12, 2023 pm 03:58 PM

準備 vuecreateexample を使用してプロジェクトを作成します パラメーターは大まかに以下のとおりです ネイティブ入力を使用します ネイティブ入力は主に値と変更です 変更する場合はデータを同期する必要がありますApp.tsx は次のとおりです: import{ref}from'vue';exportdefault{setup(){//username はデータです constusername=ref('Zhang San');//入力ボックスが変更されると、データを同期します constonInput =;return( )=>({

Laravelの入力隠しフィールドを実装する方法 Laravelの入力隠しフィールドを実装する方法 Dec 12, 2022 am 10:07 AM

laravel入力の隠しフィールドを実装する方法: 1. Bladeテンプレートファイルを見つけて開きます; 2. Bladeテンプレートのmethod_fieldメソッドを使用して隠しフィールドを作成します。作成構文は「{{ method_field('DELETE') }}」です。 」。

入力ボックスをクリックしたときにカーソルが表示されない場合の対処方法 入力ボックスをクリックしたときにカーソルが表示されない場合の対処方法 Nov 24, 2023 am 09:44 AM

カーソルなしで入力ボックスをクリックする場合の解決策: 1. 入力ボックスのフォーカスを確認する; 2. ブラウザのキャッシュをクリアする; 3. ブラウザを更新する; 4. JavaScript を使用する; 5. ハードウェア デバイスを確認する; 6. 入力を確認するボックスのプロパティ; 7. JavaScript コードをデバッグする; 8. ページの他の要素を確認する; 9. ブラウザーの互換性を考慮する。

なぜ疑似要素が失敗するのでしょうか? なぜ疑似要素が失敗するのでしょうか? Nov 21, 2023 pm 05:13 PM

疑似要素が失敗する理由: 1. セレクターの問題、2. スタイルの競合、3. 継承の問題、4. 構文エラー、5. ブラウザーの互換性の問題など。詳細な紹介: 1. セレクターの問題、疑似要素のセレクターが正しくないため、ターゲット要素が選択されない可能性があります; 2. スタイルの競合、CSS でスタイルの競合がある場合、疑似要素が無効になる可能性があります; 3.継承の問題、疑似要素が特定のスタイル属性を継承しない可能性がある; 4. 構文エラー CSS に構文エラーがある場合、疑似要素が失敗する可能性がある; 5. ブラウザの互換性の問題など。

CSS::placeholder疑似要素セレクターのさまざまなアプリケーションシナリオを実装する CSS::placeholder疑似要素セレクターのさまざまなアプリケーションシナリオを実装する Nov 20, 2023 pm 03:17 PM

CSS::placeholder 疑似要素セレクターの複数のアプリケーション シナリオを実装するには、特定のコード サンプルが必要です。Web 開発では、CSS は、Web ページのレイアウトとスタイルを制御するために一般的に使用されるスタイル シート言語です。 ::placeholder 疑似要素セレクターは、CSS3 の新しいセレクターであり、入力ボックス (テキスト入力ボックス、パスワード入力ボックスなどを含む) のプレースホルダー スタイルを変更するために使用されます。以下では、さまざまなアプリケーション シナリオを紹介し、対応するコード例を示します。入力ボックスのプレースホルダーの色を変更します。

css擬似セレクター学習擬似クラスセレクター解析 css擬似セレクター学習擬似クラスセレクター解析 Aug 03, 2022 am 11:26 AM

前回の記事「Css擬似セレクターの学習 - 擬似要素セレクターの解析」では擬似要素セレクターについて学習しましたが、今回は擬似クラスセレクターについて詳しく見ていきます。

なぜホバーは擬似要素なのでしょうか? なぜホバーは擬似要素なのでしょうか? Oct 09, 2023 pm 05:45 PM

Hover は擬似要素ではなく、擬似クラスです。疑似クラスは要素の特定の状態や動作を選択するために使用され、疑似要素は要素の特定の部分にスタイルを追加するために使用されます。 :hover は、要素の特定の部分にスタイルを追加するのではなく、要素の特定の状態を選択するために使用されるため、:hover 疑似クラスを使用して要素のマウスオーバー状態のスタイルを設定することができます。また、:hover を使用することもできます。リンクにホバー効果を追加する疑似クラス。リンク上にマウスを置くと、リンクの色、背景色などが変化します。

Vue ドキュメントの入力ボックス バインディング イベントの詳細な説明 Vue ドキュメントの入力ボックス バインディング イベントの詳細な説明 Jun 21, 2023 am 08:12 AM

Vue.js は、使いやすく、効率的で柔軟な軽量の JavaScript フレームワークで、現在最も人気のあるフロントエンド フレームワークの 1 つです。 Vue.js では、入力ボックス バインディング イベントは非常に一般的な要件です。この記事では、Vue ドキュメントの入力ボックス バインディング イベントについて詳しく紹介します。 1. 基本概念 Vue.js では、入力ボックス バインディング イベントとは、入力ボックスの値を Vue インスタンスのデータ オブジェクトにバインドすることを指し、これにより入力と応答の双方向のバインドが実現されます。 Vue.j で

See all articles