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

html,css

2019-08-13

Writing by Naoto

コーディングをしていて意外と面倒なのがフォームです。

ブラウザによって見た目がまちまちだったり、デフォルトでついてるスタイルが邪魔だったり…

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

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

デモページ

TOPICS

フォームのカスタマイズ

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

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

<input>の使い方とtype属性の一覧をサンプル付きで紹介

リセット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;
}

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

Mac：Safari、Chrom、Firefox

Windows：Chrom、Firefox、Edge 、IE

iOS：Safari、Chrom

Android：Chrom

テキスト編

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

  <div class="text-wrap">
    <input type="text" name="" value="">
  </div>
</div>

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;を入れることです。これを入れることでブラウザ間の差異がほぼ無くなります。

ラジオボタン編

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

.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;
}

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

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

チェックボックス編

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

.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;
}

ラジオボタンと同じなので説明は割愛します。

今回は説明のために別々にしていますが、共通のコードはまとめ書くとごちゃごちゃせず、保守性も上がるので良いと思います。

セレクトボックス編

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

.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で入れています。

テキストエリア編

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

  <div class="textarea-wrap">
    <textarea name="name" rows="8" cols="80"></textarea>
  </div>
</div>

textarea{
  width: 100%;
  height: 300px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

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

サブミット編

<div class="submit-wrap">
  <input type="submit" name="" value="送信">
</div>

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;でボーダーも消すのを忘れないでください。

まとめ

フォームを見やすくオシャレにする方法を紹介しました。ブラウザ対応などが少し面倒なだけで、やっていることは簡単なので、この機会にこんなことも出来ると頭に入れておくと良いでしょう。プログラミングもコーディングも暗記する必要は無いので、ブックマークでもしてやってください。

デモ

ぜひフォローしてください！！

Twitter（@naoto_k0401）

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

フォームのカスタマイズ

テキスト編

ラジオボタン編

チェックボックス編

セレクトボックス編

テキストエリア編

サブミット編

まとめ

関連記事

【実務向け】CSSのclass名の決め方(命名規則)はどうすればいいか？について解説

【コピペOK】cssの擬似要素afterとbeforeの使い方

【コピペOK】超簡単！html,cssでキービジュアルの背景にvideoタグで動画を入れる方法