html - プレースホルダーテキスト

Question

CSSのみを使用してHTML5 プレースホルダーのテキストコンテンツを変更できますか？

使ってみましたcontent : ''が、うまくいかないようです。

<input type="text" class="zip" placeholder="Enter Zip" />

input{
    &:placeholder{
       content:'Search by name'
    }
}

score 6 · Accepted Answer

Webkitベース、Firefox、およびそれ以降のビンテージのIEブラウザーでは、次の疑似要素（用語に注意）を使用できます。

// Note two colons, -input-
::-webkit-input-placeholder

// Note two colons, NO -input-
::-moz-placeholder

// Note ONE colon, -input-
:-ms-input-placeholder

この1つの属性に関連するこの特定の「機能」は進化しているように見えるため、この回答は最終的に古くなる可能性があります。結局のところ、これらはベンダープレフィックスです。

私が見つけたのは、Webkitベースのブラウザーで、この属性を疑似要素として扱うことができます（これについては以下で詳しく説明します）。CSScontentを操作して:before、変更した:afterように見えるplaceholderようにすることができます。。Firefoxでは、少なくとも現時点では、それは不可能です（後で）。IE9（私がテストした唯一のバージョン）では、動作していないようでした。

以下はChromeでのみ機能します。

マークアップ

<input type="text" class="before" placeholder="Wide "/><br/>
<input type="text" placeholder="Wide "/><br/>
<input type="text" placeholder="Wide "/>

CSS

.before::-webkit-input-placeholder:before {
    content: 'Hello \A';
    font-size: 12px;
    color: red;
}
::-webkit-input-placeholder:before {
    content: 'Hello ';
    font-size: 12px;
    color: red;
}
::-webkit-input-placeholder {
    white-space: pre;
    font-size: 5px;
}
::-webkit-input-placeholder:after {
    content: 'World';
    font-size: 12px;
    color: blue;
}

http://jsfiddle.net/LDkjW/

そこ:beforeには2つのメソッドがあります。1つ\AはCSSで機能する改行を使用し、もう1つは括弧:beforeで囲まれ:afterています。同意できるように、を使用した:afterことがある場合はあまり役に立ちません。\A:before

認識できない疑似セレクターがあるとブラウザーがおかしくなります。そのため、他のベンダーを含めることにした場合は、各ベンダーを独自のブロックに含める必要があります。-input-さらに、-moz（Firefox）疑似要素が不足していることがわかります。それは（ただ）textareaもplaceholder治療を受けるからです。そして、少なくともChrome（IE？）はこれをtextareasにも適用します。なぜ-input-そこにいるのか、誰が知っているのか。

それでおしまい。これがどのように使用されるのかはわかりませんが、おそらく別の方法で行うのが最善だと思います。Webkitブラウザーだけが気になるなら、それでいいのです。そうでなければ、多分ある日...残りはただ過剰です。

Firefox

Firefoxではかなり簡単に「ビューから削除」できます。placeholder

::-moz-placeholder {
    font-size: 0;
    left-indent: -1000px;
    font-color: white;
}

あなたはその考えを理解します。::-moz-placeholder最近まで:-moz-placeholder、新しいセレクターモニカが付けられていました。よく見てみましょう。

:-moz-placeholder  // Legacy
::-moz-placeholder // As of FF17

1つ:は、慣例により、これが選択された要素の状態を参照することを示します。あなたhoverのs 、、、、および:link、、、などのより便利なCSS3疑似セレクター。visited:focused:nth-child:selected:checked

これ::-moz-placeholderは疑似要素であり、要素の状態や状態を監視するのではなく、要素を表します。疑似要素。私たちはこれをどこに向かっているのか、あなたは考えているかもしれません。

見た目からすると、aninputは見た目とは異なります。例えば：

http://dxr.mozilla.org/mozilla-central/layout/style/forms.css.html

以下を使用してFirefoxのアドレスバーからアクセスできます。

resource：//gre-resources/forms.css

私たちは次のようなものを見つけます：

input > .anonymous-div,
input::-moz-placeholder {
  word-wrap: normal !important;
  /* Make the line-height equal to the available height */
  line-height: -moz-block-height;
}

と：

textarea > .anonymous-div,
input > .anonymous-div,
input::-moz-placeholder,
textarea::-moz-placeholder {
  white-space: pre;
  overflow: auto;
   ...
  -moz-text-decoration-color: inherit;
  -moz-text-decoration-style: inherit;
  display: inline-block;
  ime-mode: inherit;
  resize: inherit;
}
textarea > .anonymous-div.wrap,
input > .anonymous-div.wrap {
  white-space: pre-wrap;
}
textarea > .anonymous-div.inherit-overflow,
input > .anonymous-div.inherit-overflow {
  overflow: inherit;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  /*
   * Changing display to inline can leads to broken behaviour and will assert.
   */
  display: inline-block !important;
  /*
   * Changing resize would display a broken behaviour and will assert.
   */
  resize: none !important;
  overflow: hidden !important;
  /*
   * The placeholder should be ignored by pointer otherwise, we might have some
   * unexpected behavior like the resize handle not being selectable.
   */
  pointer-events: none !important;
  opacity: 0.54;
}

input::-moz-placeholder（？）に気づいたと思いますが、これtextareaも楽しみの一部です。しかし、あなたはこれに気づきましたか？

textarea > .anonymous-div,
input > .anonymous-div,

.anonymous-div？一体何ですか？それが何であれ、セレクターはそれがinput/textarea要素内にあることを示します。本当に？

後で、異常な真実が出てきます：

 /*
  * Make form controls inherit 'unicode-bidi' transparently as required by
  *  their various anonymous descendants and pseudo-elements:
  *
  * <textarea> and <input type="text">:
  *  inherit into the XULScroll frame with class 'anonymous-div' which is a
  *  child of the text control.
  *
  * Buttons (either <button>, <input type="submit">, <input type="button">
  *          or <input type="reset">)
  *  inherit into the ':-moz-button-content' pseudo-element.
  *
  * <select>:
  *  inherit into the ':-moz-display-comboboxcontrol-frame' pseudo-element and
  *  the <optgroup>'s ':before' pseudo-element, which is where the label of
  *  the <optgroup> gets displayed. The <option>s don't use anonymous boxes,
  *  so they need no special rules.
  */
textarea > .anonymous-div,
input > .anonymous-div,
input::-moz-placeholder,
textarea::-moz-placeholder,
*|*::-moz-button-content,
*|*::-moz-display-comboboxcontrol-frame,
optgroup:before {
  unicode-bidi: inherit;
  text-overflow: inherit;
}

さあ、行きます。使用するすべての要素に「匿名」（div）が埋め込まれています。これが私たちの鼻のすぐ下でおそらく起こっていることともっともらしく似ているように見えるいくつかのXULです：textareainput[type=text]

XUL

<box id="num" class="labeledbutton" title="Number of Things:" value="52"/>

<button label="Show" oncommand="document.getElementById('num').showTitle(true)"/>
<button label="Hide" oncommand="document.getElementById('num').showTitle(false)"/>

XBL

<binding id="labeledbutton">
  <content>
    <xul:label xbl:inherits="value=title"/>
    <xul:label xbl:inherits="value"/>
  </content>
  <implementation>
    <method name="showTitle">
      <parameter name="state"/>
      <body>
        if (state) document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: visible");
        else document.getAnonymousNodes(this)[0].
          setAttribute("style","visibility: collapse");
      </body>
    </method>
  </implementation>
</binding>

残念ながら、Firefoxがこの「匿名の」疑似要素のギャングを処理する方法placeholderは、Chromeで行ったようにテキストを操作できない可能性があることを意味します。

そしてちょうど今input、placeholderメカニズム/定義を含むXUL/XBLマークアップを見つけました。ここにあります：

  <property name="label" onset="this.setAttribute('label', val); return val;"
                         onget="return this.getAttribute('label') ||
                                        (this.labelElement ? this.labelElement.value :
                                         this.placeholder);"/>
  <property name="placeholder" onset="this.inputField.placeholder = val; return val;"
                               onget="return this.inputField.placeholder;"/>
  <property name="emptyText" onset="this.placeholder = val; return val;"
                             onget="return this.placeholder;"/>

placeholderスワッピングを処理します。以下は.anonymous-div、コアからのコードとスワップアウトされているように見えるを示しています。私はあなたにそれらの厄介な詳細を惜しまないでしょう。

  <binding id="input-box">
    <content context="_child">
      <children/>
      ...
    </content>

私が見つけたこれらの最後の2つのブロック：

jar:file:///C:/path/to/a/FirefoxPortable/App/firefox/omni.ja!/chrome/toolkit/content/global/bindings/textbox.xml

これ（または一般的に）でFirefoxのビジネスに興味がある場合、実際のChrome HTMLおよびCSSファイルに興味がある場合は、これを試してください。

resource：// gre-resources /

::-webkit-input-placeholderこの質問について、または::-moz-placeholderこの質問で詳細を読むことができます。この特定のタイプのセレクター（疑似クラスではなく、疑似要素...少なくとも最近は...）は、スタイルシートでそれらを使用する方法がやや脆弱であることに注意してください。

http://dxr.mozilla.org/mozilla-central/layout/style/forms.css.html

ふぅ。この狙撃狩りが終わるとは思わなかった。それが誰かを助けることを願っています。input[type=text]要素のコンテキストメニューが要素マークアップ定義を使用してXULコードにハードコードされているなど、いくつかのことを学びました。もう一つの驚き。

とにかく、頑張ってください。

score 2 · Accepted Answer

CSSのみを使用して、これを文字通り行うことはできません。あなたの試みも少しずれておりplaceholder、要素ではなく属性であり、プロパティはとcontentプロパティでのみ使用されますが、これはサポートされていません。（また、スペルに間違いがあります）:before:afterinputplacehodler

最善のアプローチは、マークアップで変更するか、それが不可能な場合はjavascriptを使用して変更することです。

yourElementSelector.placeholder = 'Search by name';

score -1 · Accepted Answer

いいえ。CSSを使用してフィールドの値を変更することを想像できますか？

あなたが期待することは、これと同じです。javascriptを使用する必要があります。

html - プレースホルダーテキスト

3 に答える 3

Related

Reference