html - 入力フィールドで :before または :after 疑似要素を使用できますか?

Question

:afterフィールドでCSS 疑似要素を使用しようとしてinputいますが、機能しません。と一緒に使えばspanOKです。

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

これでうまくいきます ("buu!" の後、"some more" の前にスマイリーを置きます)。

<span class="mystyle">buuu!</span>a some more

これは機能しません - someValue を赤で着色するだけで、スマイリーはありません。

<input class="mystyle" type="text" value="someValue">

私は何を間違っていますか？別の擬似セレクターを使用する必要がありますか?

注:サード パーティ製のコントロールによって生成されているため、 のspan前後にを追加することはできません。input

Answer 1

:beforeコンテナ内で:afterレンダリングする

<input> には他の要素を含めることはできません。

---

擬似要素は、コンテナー要素でのみ定義できます (または、より適切に言えば、サポートされているだけです)。それらがレンダリングされる方法は、子要素としてコンテナー自体内にあるためです。input他の要素を含めることはできないため、サポートされていません。button一方、フォーム要素でもあるAは、他のサブ要素のコンテナであるため、それらをサポートします。

あなたが私に尋ねると、一部のブラウザーがこれらの 2 つの疑似要素を非コンテナー要素に表示する場合、それはバグであり、非標準準拠です。仕様は要素の内容について直接語っています...

W3C 仕様

仕様を注意深く読むと、実際には、包含要素内に挿入されると書かれています。

作成者は、:before および :after 疑似要素を使用して、生成されたコンテンツのスタイルと場所を指定します。名前が示すように、:before および :after 擬似要素は、要素のドキュメント ツリー コンテンツの前後のコンテンツの場所を指定します。「コンテンツ」プロパティは、これらの疑似要素と組み合わせて、挿入されるものを指定します。

見る？要素のドキュメント ツリーのコンテンツ。私が理解しているように、これはコンテナ内を意味します。

Answer 2

:afterまた:before、Internet Explorer 7以下では、どの要素でもサポートされていません。

また、フォーム要素（入力）や画像要素などの置き換えられた要素で使用することも意図されていません。

言い換えれば、純粋なCSSでは不可能です。

ただし、jqueryを使用する場合は、

$(".mystyle").after("add your smiley here");

.afterのAPIドキュメント

コンテンツにjavascriptを追加します。これはすべてのブラウザで機能します。

Answer 3

奇妙なことに、それはいくつかのタイプの入力で動作します。少なくとも Chrome では、

<input type="checkbox" />

と同じように、正常に動作します

<input type="radio" />

type=textうまくいかないのはそれだけです。

Answer 4

これは別のアプローチです（HTMLを制御できると仮定します）：<span></span>入力の後に空の右を追加し、CSSでそれをターゲットにしますinput.mystyle + span:after

.field_with_errors {
  display: inline;
  color: red;
}
.field_with_errors input+span:after {
  content: "*"
}

<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
  <input type="text" /><span></span> 
</div>

AngularJS でこのアプローチを使用しているのは、.ng-invalidクラスを<input>フォーム要素とフォームに自動的に追加するが、<label>.

Answer 5

を使用しbackground-imageて、必須フィールドの赤い点を作成しました。

input[type="text"][required] {
  background-image: radial-gradient(red 15%, transparent 16%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat
}

Codepenで見る

Answer 6

純粋な CSS での実用的なソリューション:

コツは、テキスト フィールドの後に dom 要素があると想定することです。

/*
 * The trick is here:
 * this selector says "take the first dom element after
 * the input text (+) and set its before content to the
 * value (:before).
 */
input#myTextField + *:before {
  content: "";
} 

<input id="myTextField" class="mystyle" type="text" value="someValue" />
<!--
  There's maybe something after a input-text
  Does'nt matter what it is (*), I use it.
  -->
<span></span>

(*) ただし、限定的な解決策:

• 次の dom 要素があることを期待する必要があります。
• 入力フィールドの後に他の入力フィールドがないことを期待する必要があります。

しかし、ほとんどの場合、私たちはコードを知っているので、このソリューションは効率的で、100% CSS で 0% jQuery のように見えます。

Answer 7

私は同じ問題を抱えていたので、この投稿を見つけました。これが私にとってはうまくいった解決策でした。入力の値を置き換えるのとは対照的に、それを削除してその背後に同じサイズのスパンを絶対に配置するのとは対照的に:before、選択したアイコンフォントでスパンに擬似クラスを適用できます。

<style type="text/css">

form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>

<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>

Answer 8

他の人が説明したように、inputs はちょっと置き換えられた void 要素であるため、ほとんどのブラウザーでは、それらの要素を生成し::beforeたり::after疑似要素を作成したりすることはできません。

ただし、CSS ワーキング グループは、 and が has の場合に明示的に許可することを検討::beforeしてい::afterます。inputappearance: none

https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.htmlから、

Safari と Chrome はどちらも、フォーム入力で疑似要素を使用できます。他のブラウザはそうではありません。これを削除することを検討しましたが、use-counter はそれを使用しているページの ~.07% を記録しており、これは最大削除しきい値の 20 倍です。

実際に入力に疑似要素を指定するには、入力の内部構造を少なくともいくらか指定する必要がありますが、これはまだできていません (そして、*できる*とは確信していません)。しかし、Boris は、バグスレッドの 1 つで、appearance:none 入力で許可することを提案しました。

Answer 9

CSS 2.1 仕様の注記によると、この仕様は「:before および :after と置き換えられた要素 (HTML の IMG など) との相互作用を完全には定義していません。これは、将来の仕様でより詳細に定義される予定です。」は実際inputにはもはや置き換えられた要素ではありませんが、基本的な状況は変わっていません::beforeおよびの効果は:after指定されておらず、通常は効果がありません。

解決策は、この方法で対処しようとしている問題に対する別のアプローチを見つけることです。生成されたコンテンツをテキスト入力コントロールに配置すると、非常に誤解を招く可能性があります。ユーザーには、コントロールの初期値の一部のように見えますが、変更することはできません。コントロールですが、フォーム データの一部として送信されることはありません。

Answer 10

次に試してください：

label[for="userName"] {
  position: relative;
}

label[for="userName"]::after {
  content: '[after]';
  width: 22px;
  height: 22px;
  display: inline-block;
  position: absolute;
  right: -30px;
}

<label for="userName">
	Name: 
	<input type="text" name="userName" id="userName">
	</label>

Answer 11

:before と :after を使用して入力要素のスタイルを設定しようとしている場合、CSS スタック内の他のスパン、div、または要素の効果を模倣しようとしている可能性があります。

Robert Koritnik の回答が指摘しているように、:before と :after はコンテナー要素にのみ適用でき、入力要素はコンテナーではありません。

ただし、HTML 5 では、コンテナーであり、input[type="submit|reset"] 要素のように動作するボタン要素が導入されました。

    <style>
    .happy:after { content:url(smiley.gif); }
    </style>

    <form>
    <!-- won't work -->
    <input class="happy" type="submit" value="Submit" />

    <!-- works -->
    <button class="happy">Submit</button>
    </form>

Answer 12

概要

では動作しませんが<input type="button">、 では問題なく動作し<input type="checkbox">ます。

フィドル: http://jsfiddle.net/gb2wY/50/

HTML :

<p class="submit">
    <input id="submit-button" type="submit" value="Post">
    <br><br>
    <input id="submit-cb" type="checkbox" checked>
</p>

CSS :

#submit-button::before,
#submit-cb::before {
    content: ' ';
    background: transparent;
    border: 3px solid crimson;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: -3px -3px;
}

Answer 13

コンテンツを表示できない要素に対して ::after および ::before コンテンツを許可しないという Firefox の動作を指摘する説明は非常に正しいですが、それでもこのルールで完全に正常に動作するようです:

input[type=checkbox] {
    -moz-appearance: initial;
}

::after は、後続のスパンやラベルのような無関係なマークアップを追加せずにチェックボックスまたはラジオボックスのスタイルを変更する唯一の方法であるため、 Firefox に強制的に ::before および ::after コンテンツの表示を許可しても問題ないと思います。仕様になっています。