スマホ用のフォームは「大きく」して使いやすく

PC用のメールフォームは、スマホで見るとコンパクトに表示されてとても使いづらい～～～。
ということでCSSに記述を足して最適化。


●html側

<form action="・・・・" method="post">
<p>名前：
<input type="text" id="name" name="name"></p>

<p>メールアドレス：
<input type="email" id="email" name="email"></p>

<p>コメント：<br>
<textarea id="comment" name="coment"></textarea>

<p><input type="submit" id="submit" value="送信"></p>
</form>

●CSS側の指定

input {
    width: 100%;
    max-width: 400px; /* レスポンシブの場合の対策 */
    box-sizing: border-box; /* [borde-box]で右の飛び出しを回避 */
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

textarea {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

input[type="submit"]  {
    max-width: 300px; /*送信ボタンの幅を指定*/
}

/*補足）チェックボックスをCSSで大きくする記述例*/
input[type="checkbox"] {
    -webkit-appearance: none;
    position: relative;
    margin-right: 5px;
    border-radius: 8px;
    border: 2px solid #4c4c4c;
    -webkit-box-sizing: border-box;
    width: 20px;
    height: 20px;
    background: #ffffff;
}

/* チェック時は背景色を変更 */
input[type="checkbox"]:checked {
    background: #9FB9D3;
}