html - 追加 - 疑似要素 リンク




入力フィールドにa:beforeまたは:after疑似要素を使用できますか? (13)

私は:after CSS擬似要素を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">

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

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


:beforeコンテナ内のレンダリングの:before:after

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

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

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

W3C仕様

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

著者は:beforeと:after擬似要素で生成されたコンテンツのスタイルと位置を指定します。 その名前が示すように、:beforeおよび:after擬似要素は、要素の文書ツリーの内容の前後の内容の位置を指定します。 'content'プロパティは、これらの擬似要素と共に、挿入されるものを指定します。

見る? 要素の文書ツリーの内容 。 私が理解しているように、これはコンテナ内を意味します


CSS 2.1仕様のnoteによると、 "HTMLのIMGのような、置き換えられた要素と:beforeと:afterの相互作用を完全には定義していない。 これは将来の仕様でより詳細に定義されます。 " inputは実際には置き換えられた要素ではありませんが、基本的な状況は変更されていません:before:afterは効果がありません。

解決方法は、このように対処しようとしている問題に対する別のアプローチを見つけることです。 生成されたコンテンツをテキスト入力コントロールに入れることは、ユーザーにとってはコントロールの初期値の一部に見えるが、変更することはできないため、開始時に強制されるように見えるフォームデータの一部として提出されることはありません。


jQueryを使用して、親ブロックのafterまたはbefore要素を使用できます。 このような:

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

:beforeと:afterを使って入力要素のスタイルを設定しようとすると、CSSスタック内の他のspan、div、または要素の効果模倣しようとしていますか?

Robert Koritnikの答えは、:beforeと:afterはコンテナ要素にしか適用できず、入力要素はコンテナではないことを指摘しています。

しかしながら、HTML5は、コンテナであり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>

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


:after:beforeはInternet Explorer 7 :afterではサポートされていません。

また、 フォーム要素 (入力)やイメージ要素などの置換された要素に使用することも意図していません。

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

しかし、 jqueryを使用する場合は、

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

APIドキュメントon .after

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


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で見る


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

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

補足的に、自己閉鎖する要素(img / hr / inputなど)は、それぞれの内容で置き換えられるため、「置き換えられた要素」とも呼ばれます。 より良い用語の欠如のための "外部オブジェクト"。 もっとよく読む


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

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

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

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

実際に入力上に擬似要素を指定するには、入力の内部構造を少なくともいくらかは指定する必要がありますが、私たちはまだそれを行うことができませんでした(私たちは*できます)。 しかし、ボリスはバグスレッドの1つで、それが外見上可能にすることを提案しました。入力はありません - 基本的にちょうど「ちょっと置き換えられた」要素ではなく<div>に変えてください。


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

<input type="checkbox" />

うまく動作します

<input type="radio" />

type=textが、動作しないものもあります。


次の試み:

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>


私はあなたがこれを次のようにすることができることを発見しました:

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

あなたはpaddingと:afterを取るdivの親を持つ必要があります。 最初の親は相対的なものでなければならず、2番目のdivは絶対的なものでなければならないので、後の位置を設定することができます。


純粋な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と思われます。





css-content