web-dev-qa-db-ja.com

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

inputフィールドで:after CSS擬似要素を使用しようとしていますが、うまくいきません。 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の周囲に追加することはできません。

htmlcsspseudo-elementcss-content
612
matra

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

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

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

しかし jquery を使えば使えます

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

.afterに関するAPIドキュメント

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

232
Alex

:beforeおよび:afterはコンテナ内にレンダリングします

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

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

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

W3C仕様

仕様 を注意深く読んだ場合、実際にはそれらが含まれている要素に挿入されているinsideと書かれています：

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

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

1231
Robert Koritnik

奇妙なことに、それはある種の入力で動作します。少なくともChromeでは、

<input type="checkbox" />

と同じようにうまく動作します

<input type="radio" />

それは単にtype=textと他のいくつかが動かないのです。

58
vals

:beforeおよび:afterはコンテナ内に適用されます。つまり、終了タグを持つ要素に使用できます。

自己閉鎖要素には適用されません。

ちなみに、自己閉鎖的な要素（img/hr/inputなど）は、それぞれの内容に置き換えられるため、 '置き換えられた要素'とも呼ばれます。より良い用語がないための「外部オブジェクト」もっと読む ここ

36
CatalinBerta

これは別のアプローチです （あなたがHTMLのコントロールを持っていると仮定します）：入力の直後に空の<span></span>を追加し、input.mystyle + span:afterを使用してCSSでそれをターゲットにします

.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>には追加しないためです。

36
Blazemonger

必須フィールドに赤いドットを作成するために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で表示します

28
Veiko Jääger

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

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

他のブラウザでも動作させるには、:-moz-placeholder、::-moz-placeholder、:-ms-input-placeholder をそれぞれ異なるセレクタ で使います。ブラウザがセレクタを認識しないと文全体が無効になるため、セレクタをグループ化できません。

_ update _ ：上記のコードはCSSプリプロセッサ（SASS、LESS ...）でのみ動作します。プリプロセッサは使用しません。

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

:after、:beforeのような擬似要素はコンテナ要素専用です。 <input/>、<img>などのように単一の場所で開始および終了する要素はコンテナ要素ではないため、疑似要素はサポートされません。疑似要素を<div>のようにコンテナ要素に適用したら、コードを調べると（画像を参照）、私の意味を理解することができます。実際には擬似要素はcontainer要素の中に作成されます。 <input>または<img>の場合、これは不可能です。

enter image description here

13
Pons Purushothaman

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

純粋なCSSの実用的な解決策：

トリックはtext-fieldの後に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です。

12
user3114072

CSS 2.1仕様の note によると、この仕様は「置換前の要素と置換後の要素（HTMLのIMGなど）との相互作用を完全には定義していません。 inputは実際には置き換えられた要素ではなくなりましたが、基本的な状況は変わっていません。:beforeと:afterの影響は未定義であり、通常は効果がありません。

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

4
Jukka K. Korpela

次に試してください：

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>
4
Alex Ovchinkin

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

しかし、CSSワーキンググループは、inputname__に::beforeがある場合には、::afterとappearance: noneを明示的に許可することを検討しています。

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

SafariとChromeはどちらもフォーム入力に疑似要素を許可します。他のブラウザはそうではありません。これを削除することを検討しましたが、使用カウンタはそれを使用しているページの〜0.07％を記録しています。これは最大削除しきい値の20倍です。

実際に入力に疑似要素を指定するには、入力の内部構造を少なくともある程度指定する必要があります。これはまだできていません（そして*私が*できる*ことができると確信していません）。しかし、Borisは、バグスレッドの1つで、見かけ上それを可能にすることを提案しました。入力なし - 基本的には「ちょっと置き換えられた」要素ではなく単に<div>に変換するだけです。

4
Oriol

疑似要素の前または後を使用するには、入力を囲むある種のラッパーが必要です。これは入力のラッパーdivの前にbeforeを持ち、それから入力の前にbeforeを置く - あるいは少なくともそれはそのように見えます。明らかに、これは回避策ですがピンチで効果的であり、敏感に反応するのに役立ちます。他のコンテンツを追加する必要がある場合は、これを簡単に変更することができます。

作業Fiddle

疑似要素としての入力内のドル記号：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;
}
3
Kapunahele Wong

：beforeと：afterを使用して入力要素をスタイルしようとしているのであれば、他のspan、div、さらにはCSSスタック内の要素の影響を模倣しようとしている可能性があります。

Robert Koritnikの答えが指摘するように、：beforeと：afterはcontainer elementsにのみ適用でき、input要素はコンテナではありません。

しかし、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>
1
Kevin Conroy

ここでの最大の誤解はbeforeとafterの意味です。それらは ではなく 要素自体を参照しますが、 content 要素内では参照します。したがって、element:beforeはコンテンツの前、element:afterはコンテンツの後にありますが、どちらも元の要素の内側にあります。

input要素にはCSSビューの内容がないため、:beforeまたは:after疑似コンテンツはありません。これは、他の多くの無効要素または置き換えられた要素にも当てはまります。

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

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

1
Manngo

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

1
Juan Mendes

まとめ

<input type="button">では機能しませんが、<input type="checkbox">では正常に機能します。

Fiddle ： 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;
}
1
K48

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

.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は絶対的である必要がありますので、後の位置を設定できます。

0
Patrick

あなたはjQueryであなたの親ブロックのafterまたはbefore要素を使うことができます。このような：

$(yourInput).parent().addClass("error-form-field");
0
Dima Dulin