日記

フォームの装飾に関するメモ

 

しばらくの間 bootstrap使ってたので、フォームについて適当でもよかったんですがもうflexが一般的になったためあまりメリットがなくなったように感じています。

フォーム装飾には少しコツがいるのでメモっておきたいと思います。

属性セレクタを使う

input[type="text"]{

}

上記のようにすると、submitなどを外して指定ができます。

デフォルトのスタイルを消す

色々指定したつもりが効かないとか、iphoneで表示が変わっちゃうとかの時に指定してください。

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

フォーカス時のスタイルを指定する

input[type="text"]:focus,
textarea:focus {
  box-shadow: none;
  border: 1px solid red;
  outline: 0;
}

ここをしっかり指定しておくといい感じに見えるようになります。
「outline」がデフォルトの影です。

フォントサイズは16px以上にする

スマホでinput、textareaのフォントを16px以下にすると、フォーカス時にズームされます。
使い勝手的にも16pxは使いやすいサイズだと思いますので、16px以上にしておきましょう。PCはこの縛りは特にありません。

textarea

resize: none;

サイズ変更をOFFにできます。
長い文書を書く可能性がある場合はoffにしない方がいいです。

選択時の色

コピペのために選択した時の色を変更できます。
フォーム関係ないですけど。

::selection {
    background: #ff0000;
    color: #fff;
}
こちらの記事もおすすめ！