@wai_ya.com

フォーム関連のCSSで忘れやすいもの

2014.05.08 | Cats : CSS

フォームのインプットの忘れやすいものをまとめる。

フォーカスがあたった時に周りのラインを消す

input:focus{
  outline:none;
}

placeholderのスタイルを変更する

placeholderへのcssの記述方法(firefox / safari / chromeで確認)
・input / textarea 両方に効かせる

::-webkit-input-placeholder { color: #F00; }
::-moz-placeholder { color: #F00; }

・input 要素に効かせる

input::-webkit-input-placeholder { color: #F00; }
input::-moz-placeholder { color: #F00; }

・textarea 要素に効かせる

textarea::-webkit-input-placeholder { color: #F00; }
textarea::-moz-placeholder { color: #F00; }

とりあえず、ここまで。
随時追加していく。

コメントを残す