WebKit系でプレースホルダーを右寄せに表示する
Mobile Safariでinputタグのプレースホルダーを右寄せ表示しようとtext-align:rightを指定しても寄らない。調べたらwebkitではplaceholder用の要素があるようだ。
::-webkit-input-placeholder { color: red; text-align: right; }
こうすると色はつくんだけど右寄せにはならない。再度調べるとtext-alignは未対応らしい。Javascriptで書くしかないかーと思ったらちょっとした小技でいけた。
input { direction: ltr; } ::-webkit-input-placeholder { direction: rtl; }
directionというアラビア語などの右から左へ(right to left)文字を書く言語用の指定があるようだ。これを指定すると右寄せ表示になる。ちなみに文字入力は普通になるんだけど、削除の挙動が違うのでinput要素には(left to right)を指定したほうがよさそう。
そんなんで。