HTML CSS form 関係まとめ

cssははじめに、サニタイズしておく必要がある。 padding,margin などをまとめて初期化すること。

ここへ csstools.github.io

<link rel="stylesheet" href="style.css">

下記のような、下線だけあるinputは f:id:happy_teeth_ago:20190807164455p:plain

input {
//まずborderをclear
  border: none;
//その上で下線を指定 solid は直線ほかに dotted、 dashedなどがある
  border-bottom: 1px solid #d1d1d1;
  font-size: 1.2rem; 
 width: 100%;
  padding: 8px;
}

button

button {
  width: 100%;
  background-color: #2096F3;
  border: none;
 //文字色
 color: #FFF;
  padding: 15px;
//角丸
  border-radius: 3px;

//ドロップシャドウ 4つの半角ブランクで指定 X, Y ,ボケ具合の大きさ, 色3つと透明度
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4)
}