【CSS】inputタグのスタイリング基本プロパティ

テンプレ

.c-input {
  font-size: 16px;
  width: 100%;
  height: 30px;
  border-radius: 3px;
  padding: 3px 5px;
  box-sizing: border-box;
  background-color: #fff;
      &:focus {
          outline: none;
      }
      &:invalid {
          border: solid 1px red;
      }
}

スタイリングは適当に書いたので、ユースケースに応じて設定する。

プロパティ説明

サイズ

width => 親(フォーム)要素のwidth、paddingで調整するので基本100%でいい
height => フォントのサイズとの兼ね合いで決める。フォントサイズが16pxで、余白が5px欲しかったらheightは26px、みたいな感じ

形

border-radius => inputの角を調整する

フォント

font-size => input要素のフォントサイズはp,divなどとは別のため忘れず指定する。大体input[type="text"]とか、input要素単位で指定する
font-color => input要素のフォントカラーはp,divなどとは別のため忘れず指定する

レイアウト

padding => 文字とinputの余白を調整しないと窮屈な印象になる
box-sizing => heightの値 = 縦のサイズにするため
border-boxを指定して統一しやすくする。

カラー

background-color => 背景色を指定する
outline => 外枠。:focusで付けることでフォーカス時の枠線を消す
ちなみに、スマホでタップした時の枠もtap-highlight-color:rgba(0,0,0,0); で消せる
``