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

5765 ワード
CSS デザイン CSS テキストリンク

概要

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

ポイント

①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変更できます。

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

④textareaの右下のやつを消す

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

textarea{
    resize: none;
}

⑤画像選択も消す


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

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

<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>   

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

まとめ

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