【コピペOK】cssでhtmlのダサいフォームをおしゃれにする方法

  • HTML/CSS

この記事の目次

コーディングをしていて意外と面倒なのがフォームです。
ブラウザによって見た目がまちまちだったり、デフォルトでついてるスタイルが邪魔だったり…

フォームのデザインは、特にオシャレにする必要もなく、ユーザにとってわかりやすいものにすることがベストです。それ故、一度作ればその後の案件もコピペベースで作ることができます。

この記事では僕が使っているフォームのスタイルを紹介します。

デモページ

フォームのカスタマイズ

inputのtype属性は色々あるのですが、今回はよく使うもののみを紹介します。ここで紹介したものを使いこなせれば、他のtype属性も少し修正して対応できます。

type属性に関しては下記の記事がまとまっていて、すごくわかりやすかったです。

リセットcssによって見た目が少し違ってしまうかもしれないので、全く同じにしたい場合下記のcssを最初に記載してください。

css 
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

*{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  box-sizing: border-box;
}

body{
  line-height: 1.6;
  line-height: 2;
}

ブラウザ対応はこの通り。全て最新版で見てます。

OS ブラウザ
Mac Safari、Chrom、Firefox
Windows Chrom、Firefox、Edge 、IE
iOS Safari、Chrom
Android Chrom

テキスト編

5dc3580e0060894c467f028cf936574a

html 
<div class="box">
  <span class="item-name">テキスト</span>

  <div class="text-wrap">
    <input type="text" name="" value="">
  </div>
</div>
css 
input[type='text']{
  width: 100%;
  max-width: 400px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

関係ないclassもついていますが、それは気にしないでください。デモでスタイルを整えるのに使っています。

特に難しいことはしていませんね、もちろん幅や余白などはご自身の好みに合わせて変えてもらって大丈夫です。ポイントはappearance: none;を入れることです。これを入れることでブラウザ間の差異がほぼ無くなります。

ラジオボタン編

cf1551d039ae256e88d13fa7cb24c50e

html 
<div class="box">
  <span class="item-name">ラジオボタン</span>

  <div class="radio-wrap">
    <label>
      <input type="radio" name="radio" value="radiobtn">
      <span>ラジオボタン1</span>
    </label>

    <label>
      <input type="radio" name="radio" value="radiobtn">
      <span>ラジオボタン2</span>
    </label>
  </div>
</div>
css 
.radio-wrap label{
  margin-right: 20px;
  display: inline-block;
}

.radio-wrap input{
  display: none;
}

.radio-wrap input + span{
  padding-left: 22px;
  position:relative;
}

.radio-wrap input + span::before{
  content: "";
  background-image: url(../img/radio.png);
  background-size: contain;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
}

.radio-wrap input:checked + span{
  color: #487cff;
  font-weight: bold;
}

.radio-wrap input:checked + span::after{
  content: "";
  background-image: url(../img/radio-checked.png);
  background-size: contain;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
}

デフォルトでついているラジオボタンをdisplay: none;で消して、そこにpadding-left: 22px;でスペースを作り、擬似要素beforeで画像を入れています。

選択したときのスタイルはcheckedで指定できます。選択されると文字の色を変更し、あらかじめ用意しておいた選択されたとき用の画像に変更しています。

チェックボックス編

ed9653e8051b3aacfe164244724847df

html 
<div class="box">
  <span class="item-name">チェックボックス</span>

  <div class="checkbox-wrap">
    <label>
      <input type="checkbox" name="" value="checkbox1">
      <span>チェックボックス1</span>
    </label>

    <label>
      <input type="checkbox" name="" value="checkbox2">
      <span>チェックボックス2</span>
    </label>

    <label>
      <input type="checkbox" name="" value="checkbox3">
      <span>チェックボックス3</span>
    </label>

    <label>
      <input type="checkbox" name="" value="checkbox4">
      <span>チェックボックス4</span>
    </label>

    <label>
      <input type="checkbox" name="" value="checkbox5">
      <span>チェックボックス5</span>
    </label>

    <label>
      <input type="checkbox" name="" value="checkbox6">
      <span>チェックボックス6</span>
    </label>
  </div>
</div>
css 
.checkbox-wrap label{
  margin-right: 20px;
  display: inline-block;
}

.checkbox-wrap input{
  display: none;
}

.checkbox-wrap input + span{
  padding-left: 22px;
  position:relative;
}

.checkbox-wrap input + span::before{
  content: "";
  background-image: url(../img/check.png);
  background-size: contain;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
}

.checkbox-wrap input:checked + span{
  color: #487cff;
  font-weight: bold;
}

.checkbox-wrap input:checked + span::after{
  content: "";
  background-image: url(../img/check-checked.png);
  background-size: contain;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
}

ラジオボタンと同じなので説明は割愛します。
今回は説明のために別々にしていますが、共通のコードはまとめ書くとごちゃごちゃせず、保守性も上がるので良いと思います。

セレクトボックス編

f5379a236216b94d8090e37dee76c6d7

html 
<div class="box">
  <span class="item-name">セレクトボックス</span>

  <div class="select-wrap">
    <select name="blood">
      <option value="select1">セレクト1</option>
      <option value="select2">セレクト2</option>
      <option value="select3">セレクト3</option>
      <option value="select4">セレクト4</option>
      <option value="select5">セレクト5</option>
      <option value="select6">セレクト6</option>
    </select>
  </div>
</div>
css 
.select-wrap {
  position: relative;
  width: 100%;
  max-width: 250px;
}

.select-wrap:before {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%) translateX(0);
  content: '';
  width: 15px;
  height: 15px;
  background: url(../img/select.png) no-repeat;
  background-size: contain;
}

.select-wrap select{
  width: 100%;
  outline:none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 40px;
  padding: 5px;
  border:1px solid #ccc;
  background-color: #fff;
  border-radius: 5px;
}

.select-wrap select::-ms-expand {
  display: none;
}

セレクトボックスもappearance: none;を入れるとデフォルトの矢印は消えます。ただIEだとそれが消えないので、.select-wrap select::-ms-expandにdisplay: none;を入れるのを忘れないでください。

やっていることは、デフォルトの矢印を消して、そこに用意していた矢印の画像を擬似要素beforeで入れています。

テキストエリア編

34334051a2f0aca43fb87437d0da4b8b

html 
<div class="box">
  <span class="item-name">テキストエリア</span>

  <div class="textarea-wrap">
    <textarea name="name" rows="8" cols="80"></textarea>
  </div>
</div>
css 
textarea{
  width: 100%;
  height: 300px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

テキストと同じなので、説明は割愛します。

サブミット編

19bb31b04fbb411b37856642f9b67f93

html 
<div class="submit-wrap">
  <input type="submit" name="" value="送信">
</div>
css 
input[type='submit']{
  border: none;
  display: block;
  width: 100%;
  max-width: 300px;
  padding: 10px;
  border-radius: 5px;
  background-color: #333;
  color: #fff;
  font-weight: bold;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  margin: 0 auto;
}

こちらも特別難しいことはしていません。
appearance: none;でデフォルトのスタイルはほぼ消えますが、ボーダーが残るのでborder: none;でボーダーも消すのを忘れないでください。

まとめ

フォームを見やすくオシャレにする方法を紹介しました。ブラウザ対応などが少し面倒なだけで、やっていることは簡単なので、この機会にこんなことも出来ると頭に入れておくと良いでしょう。

プログラミングもコーディングも暗記する必要は無いので、ブックマークでもしてやってください。

また、フォームでの離脱を防ぐための対策でEFO(エントリーフォーム最適化)というものがあります。興味がある方はググってみてください。

Share

この記事を書いた人

神崎 直人

理系院卒→フリーランス(4年目)。インターネットと読書が好き。就職経験なし、野蛮な生き方してきました。サーバーサイド以外は何でもやります。