web-dev-qa-db-ja.com

CSSのみを使用してプレースホルダーを入力する

ここにこのクエリに関する質問がたくさんあることは知っていますが、どれも私に解決策を提供しません。

[〜＃〜] html [〜＃〜]

<input id="tb1" type="text" class="note" />

<br>

<p class="note1"> This is not done.</p>

[〜＃〜] css [〜＃〜]

p.note1:before{
    content: "Note:";
}

tb1.note:before{
    content: "Enter your number";
}

上記のコードとWebで見つかったバリエーションを試していますが、入力タグでは機能しないようです。 pタグで動作しています。

EDIT：入力タグにvalue属性を追加して、目的の結果を得るためにcssを管理できません。それはシステムの制限です。

EDIT2：私のcssを忘れてください。プレースホルダー属性を使用せずに、input type="text"のプレーンなcssだけでプレースホルダーテキストを使用できる方法はありますか。

htmlcsscss3pseudo-elementcss-content
5
Akki619

これは、次のような単純な事実では機能しません。

<input id="tb1" type="text" class="note"></input>

有効ではない。 <input />要素はコンテナではありません。スペックノートにあるように、エンドタグは禁止されています（そして基本的にブラウザによって無視されます）： http://www.w3.org/TR/html401/interact/forms.html#h-17.4

1
Tieson T.

：before 一致した要素の最初の子である疑似要素を作成します。

選択した要素はコンテナタグでなければなりません。 <input>のような空のタグには、子要素がありません。

HTMLコードを手動で編集できない場合でも、JavaScriptを使用して編集できます。

document.getElementById("tb1").setAttribute("placeholder", "Enter your number");

更新

CSSのみを使用してこれを実現する場合は、<input>をラップする（またはその後に来る）コンテナ要素を用意する必要があります。

[〜＃〜] but [〜＃〜]placeholderのように正しく機能しません。 CSSで<input>の値を確認することはできません。 <input>内に何かを書き込むと、blurイベントの後、生成されたプレースホルダーが<input>の上に再び表示されます。

HTML：

<label>
    <input id="tb1" type="text" class="note">
</label>

CSS：

label {
  position: relative;
}

label:after {
  content: 'Enter your number';
  position: absolute;
  left: 5px;
  top: 0;
  color: #bbb;
}

#tb1 {
  position: relative;
}

#tb1:focus {
  z-index: 10;
}

JSBinデモ

8
Hashem Qolami

私はこの方法を見つけましたが、すべてのブラウザでサポートされているわけではありません。

#tb1.note:empty:before{
    content: "Enter your number";
}

注：IDセレクターを配置するのを忘れています# tb1.note

このリンクを参照

1
Bhojendra Rauniyar

編集：

初心者のためにこれを試してください：（注：テキストが入力に入力されているかどうかを検出するためにいくつかのjsが必要です）

これとは別に、これは、プレースホルダー属性を使用せずに入力要素のプレースホルダーテキストのcssソリューションがあるとは思いません。

[〜＃〜]フィドル[〜＃〜]

Markup

<div class="container">
<input />
<div class="fakePlaceholder">Some placeholder text</div>
</div>

css

.container
{
    position: relative;
}
input
{
    background: transparent;
}
input:focus + .fakePlaceholder
{
    display: none;
}
.fakePlaceholder
{
    color:gray;
    position:absolute;
    top: 3px;
    left: 5px;
    z-index: -1;
}

inputタグで疑似要素を使用することはできません-またはその他のコンテナ以外の要素を使用することはできません

Pseudo-Elementsタグ情報 から：

実際のコンテンツを持たない要素（以下を参照）を置​​き換えてそれら（疑似要素）を使用することはできません。これは、生成されたコンテンツが要素内に存在するためです。
.。

置換された要素

外観や寸法が外部リソースによって決定される要素は、置き換えられた要素と見なされます。一部の疑似要素は、「コンテンツ」がないか、何か（ユーザーインターフェイスコントロールなど）に置き換えられるため、置き換えられた要素に適用できません。置き換えられた要素には画像が含まれます（<img>）、インラインフレーム（<iframe>）、改行（<br>）、水平ルール（<hr>）、プラグイン（<object>）、フォーム要素（<button>、<textarea>、<input>、および<select>）、ビデオ（<video>）、音声（<audio>）、およびキャンバス（<canvas>）。その他の要素は、置き換えられていない要素と見なされます。

1
Danield

これを実現するもう1つの方法は、他の人がオプションとして提供するのを見たことがないのですが、代わりに、入力とラベルの周りのコンテナーとしてアンカーを使用し、色のトリックである#hashtagを介してラベルの削除を処理することです。 、およびcss a：visited。 （下部のjsfiddle）

HTMLは次のようになります。

<a id="Trickory" href="#OnlyHappensOnce">
    <input type="text" value="" id="email1" class="inputfield_ui" />
    <label>Email address 1</label>
</a>

そしてあなたのCSS、このようなもの：

html, body {margin:0px}
a#Trickory {color: #CCC;} /* Actual Label Color */
a#Trickory:visited {color: #FFF;} /* Fake "Turn Off" Label */

a#Trickory:visited input {border-color: rgb(238, 238, 238);} /* Make Sure We Dont Mess With The Border Of Our Input */

a#Trickory input:focus + label {display: none;} /* "Turn Off" Label On Focus */

a#Trickory input {
    width:95%;
    z-index:3;
    position:relative;
    background-color:transparent;
}
a#Trickory label {
    position:absolute;
    display:block;
    top:3px;
    left:4px;
    z-index:1;
}

これがjsfiddleで機能していることを確認できます。このソリューションでは、ラベルを完全に削除する前に、ユーザーがフィールドを1回だけ選択できることに注意してください。たぶんあなたが望む解決策ではないかもしれませんが、私が他の人が言及しているのを見たことがない、確かにそこにある利用可能な解決策です。複数回実験したい場合は、＃hashtagを新しい「非訪問」タグに変更するだけです。

http://jsfiddle.net/childerskc/M6R7K/

1
NinjaKC

HTMLを操作できず、_placeholder=""_を使用する場合。 javascriptを使用してプレースホルダーを操作します。とにかく、すべてのcssアプローチはハックです。例えば。 jQueryを使用する場合：$('#myFieldId').attr('placeholder', 'Search for Stuff');

0
Hafenkranich