デザインど素人がそれっぽいフォームを作るときのポイント

概要

フォームの初期デザインって（当たり前ですが）ダサいですよね。
しかし、どうすればそれっぽくなるのかイチイチ悩んでしまって時間がかかってしまったので、デザイン素人が一瞬でそれっぽくするフォームの作成をまとめたいと思います。

ポイント

①input要素の横幅は全て統一

input{
width:90%;
}

複数あるフォームの部品は横幅を揃えることでそれっぽくなります。

②枠線はいい感じに

input要素の初期値は下記のようになってます。

改善前.css

input{
    border-width: 2px;
    border-style: inset;
    border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
}

太さは1pxの方がスタイリッシュになりますし、色もダサいし、個人的にinsetじゃなくてsolidのほうがかっこいいです。

改善後.css

input{
    border: 1px solid #CFCABF;
}

色はハッキリした色は使わない方がそれっぽいです。

③入力欄の選択時の枠線をいい感じに

デフォルトの選択時の枠線配は以下のようになっています。

（ださい。。。）

input:focusでstyle変更できます。

.css

input:focus{
  border: 1px solid #ff9900;
}

④textareaの右下のやつを消す

この右下にあるのもダサいので、消しておきます。

.css

textarea{
    resize: none;
}

⑤画像選択も消す

input fileもダサいので変更します。

これは初期値を弄るよりも、これ自体をdisplay:none;にして別でボタンを作った方が手っ取り早いです。

.html

<label class="form-label image-label" for="image">
    <input id="image" type="file" name="image"
        accept="image/png, image/jpeg" style="display:none;" v-on:change="onFileChange">
    <div>アイコンを変更する</div>
</label>   

.css

label div{
    display: inline-block;
    border: 1px solid;
    border-radius: 5px;
    padding: 2%;
    margin: 0;
    cursor: pointer;
}

まとめ

デザイナーから見たら何言ってんだコイツって思われるのかもしれませんが、これでそれっぽいフォームを作ることができました。