なんかの Log

良い感じで投げっぱなしにしてみせる。

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)を指定したほうがよさそう。

そんなんで。