::placeholder
pseudo-elementまだワーキングドラフトであり、それは、サポートされているCSSプロパティの非常に限られた数を持っています。
:: first-line擬似要素に適用されるすべてのプロパティは、:: placeholder擬似要素にも適用されます。
追加のプロパティは述べませんが、人々がサポートされるようにtext-align
を希望指摘されています。
サポートされているプロパティのほんの少しのリスト(found here)から、プレースホルダのテキストの長さが1単語だけだった場合、これを実現する正しい方法があります。 これは、文字の接頭辞を付けて非表示にして、サポートされているword-spacing
プロパティを利用できるようにします。
ブラウザプレフィックスを使用していないため、これはおそらく動作しません。
input {
width: 200px;
background-color: #fff!important;
}
input::placholder {
word-spacing: 155px;
}
input::placholder:first-letter {
color: #fff!important;
}
<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="- ارلاین">
これは
input {
width: 200px;
background-color: #fff!important;
}
input::placholder {
word-spacing: 155px;
}
input::placholder::first-letter {
color: #fff!important;
}
/* browser support */
input::-webkit-input-placeholder {
word-spacing: 155px;
}
input:-moz-placeholder {
word-spacing: 155px;
}
input::-moz-placeholder {
word-spacing: 155px;
}
input:-ms-input-placeholder {
word-spacing: 155px;
}
input::-webkit-input-placeholder::first-letter {
color: #fff!important;
}
input:-moz-placeholder:first-letter {
color: #fff!important;
}
input::-moz-placeholder::first-letter {
color: #fff!important;
}
input:-ms-input-placeholder::first-letter {
color: #fff!important;
}
<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="- ارلاین">
を動作するはずです。しかし、ブラウザは、彼らはいけない事をサポートし、彼らはあなたがちょうど試みることができる必要があります事をサポートしていないとして、この。
これは動作しません。プレースホルダは、それが何かを習慣カーソルまたは編集可能なテキストを持っていないよう
input::-webkit-input-placeholder {
/* WebKit browsers */
text-align: right;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
text-align: right;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ but I'm not sure about working */
text-align: right;
}
input:-ms-input-placeholder {
/* Internet Explorer 10 */
text-align: right;
}
input::placeholder {
text-align: right;
}
<input type="text" name="airline_search" style="direction: ltr; border: none;" placeholder="ارلاین">
FYI direction: ltr;
は、カーソル位置とテキストの流れを管理します。
クロームとオペラのために、それはなんですか? –
AFAIK、サポートされていません。このJquery修正を試してください:http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html – Hnatt
ChromeはWebkitを使用しています。 –