入力フィールドで：beforeまたは：after疑似要素を使用できますか？

:afterCSS疑似要素をinputフィールドで使用しようとしていますが、機能しません。と一緒に使用するとspan、問題なく動作します。

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

これは機能します（「buu！」の後、「もう少し」の前にスマイリーを置きます）

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

これは機能しません-someValueを赤で着色するだけですが、笑顔はありません。

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

何が悪いのですか？別の疑似セレクターを使用する必要がありますか？

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

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

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

つまり、純粋なCSSでは不可能です。

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

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

.afterのAPIドキュメント

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

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

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

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

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

W3C仕様

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

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

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

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

<input type="checkbox" />

正常に動作します

<input type="radio" />

type=textうまくいかないのは、正に他にもいくつかあります。

これは別のアプローチです（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>。

:beforeそして:afterあなたは終了タグを持つ要素のためにそれを使用することができることを意味し、コンテナ、内部で適用されます。

自己終了要素には適用されません。

余談ですが、自己完結型の要素（img / hr / inputなど）は、それぞれのコンテンツに置き換えられるため、「置き換えられた要素」とも呼ばれます。より適切な用語がないため「外部オブジェクト」。こちらをお読みください

を使用し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で見る

疑似要素を入力要素に入れることはできませんが、プレースホルダーのようにシャドウ要素を入れることはできます！

input[type="text"] {   
  &::-webkit-input-placeholder {
    &:before {
      // your code
    }
  }
}

それは他のブラウザ、使用中に動作させるために:-moz-placeholder、::-moz-placeholderそして:-ms-input-placeholder 異なるセレクタで。ブラウザがセレクタを認識しない場合、ステートメント全体が無効になるため、セレクタをグループ化できません。

更新：上記のコードはCSSプリプロセッサ（SASS、LESS ...）でのみ機能し、プリプロセッサは使用しません。

input[type="text"]::-webkit-input-placeholder:before { // your code }

のような疑似要素は:after、:beforeコンテナ要素専用です。要素の開始と同様に1つの場所で閉じて<input/>、<img>などがコンテナ要素ひいては擬似要素がサポートされていないものではありません。のようにコンテナー要素に疑似要素を適用<div>すると、コードを検査すると（画像を参照）、私の意味が理解できます。実際には、疑似要素はコンテナ要素内に作成されます。<input>またはの場合、これは不可能です<img>

純粋な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要素があることを期待する必要があります。
• 入力フィールドの後に他の入力フィールドがないことを期待する必要があります。

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

私は同じ問題を抱えていたのでこの投稿を見つけました、これは私のために働いた解決策でした。入力の値を置き換えるのとは対照的に、入力を削除してその後ろに同じサイズのスパンを絶対的に配置するのではなく、: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>

ここで最大の誤解は、単語beforeとの意味ですafter。彼らは、ないない要素自体を指し、これにコンテンツ要素インチ だから、element:beforeコンテンツの前にあり、かつelement:afterコンテンツの後であるが、両方は、元の要素の中に残っています。

input要素は、CSSビューでないコンテンツを持っていない、したがって全く有し:before又は:after擬似コンテンツ。これは、他の多くの無効または置換された要素に当てはまります。

要素の外部を参照する疑似要素はありません。

別の世界では、これらの疑似要素は、この区別を明確にするために別の名前で呼ばれている可能性があります。そして、誰かが本当に要素の外にある疑似要素を提案したかもしれません。これまでのところ、これはこの宇宙には当てはまりません。

CSS 2.1仕様の注記によると、この仕様は「：beforeと：afterの置き換えられた要素（HTMLのIMGなど）との相互作用を完全には定義していません。これは、将来の仕様でより詳細に定義される予定です。」けれどもinputの影響：任意のより多くの本当に置き換え要素ではない、基本的な状況は変わっていない:beforeと:after、不特定でその上を、一般的には効果がありません。

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

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

ただし、CSSワーキンググループは明示的に許可すること::beforeを検討::afterしinputていappearance: noneます。

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

SafariとChromeでは、フォーム入力に疑似要素を使用できます。他のブラウザはサポートしていません。これを削除することを検討しましたが、use-counterはこれを使用しているページの〜.07％を記録しています。これは、最大削除しきい値の20倍です。

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

次を試してください：

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>

beforeまたはafter疑似要素を使用するには、入力の周りにある種のラッパーが必要です。これは、入力のラッパーdivにbeforeがあり、入力の前にbeforeを配置するフィドルです-または少なくともそれはそのように見えます。明らかに、これは回避策ですが、ピンチには効果的であり、応答性に役立ちます。他のコンテンツを追加する必要がある場合は、これを後で簡単に作成できます。

フィドル

疑似要素としての入力内のドル記号：http : //jsfiddle.net/kapunahele/ose4r8uj/1/

HTML：

<div class="test">
    <input type="text"></input>
</div>

CSS：

input {
    margin: 3em;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    width:20%; 
}


.test {
    position: relative;
    background-color: #dedede;
    display: inline;
}

.test:before {
    content: '$';
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 1;
}

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

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

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

    <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>

概要

では動作しません<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;
}

:beforeまた:after、新しいノードを最初または最後のノードとして挿入するため、子ノードを持つことができるノードに対してのみ機能します。

私はあなたがこのようにそれを行うことができることがわかりました：

.submit .btn input
{
   padding:11px 28px 12px 14px;
   background:#004990;
   border:none;
    color:#fff;
}

 .submit .btn
 {
     border:none;
     color:#fff;
     font-family: 'Open Sans', sans-serif;
     font-size:1em;
     min-width:96px;
     display:inline-block;
     position:relative;
 }

.submit .btn:after
{
    content:">";
    width:6px;
    height:17px;
    position:absolute;
    right:36px;
    color:#fff;
    top:7px;
}

<div class="submit">
  <div class="btn">
     <input value="Send" type="submit" />
  </div>
</div>

パディングと：afterを受け取るdiv親が必要です。最初の親は相対である必要があり、2番目のdivは絶対である必要があるため、後の位置を設定できます。

代わりにこれを使用する別のアイデアがあります：

<div>
<input type="text"></input>text can be entered here</div>