【コピペOK】cssでhtmlのダサいフォームをおしゃれにする方法
webkoreはフリーランスのweb制作チームで運営しています。お仕事のご依頼は、web制作やシステム開発のご相談やその他のご相談からお気軽にご相談ください。
コーディングをしていて意外と面倒なのがフォームです。
ブラウザによって見た目がまちまちだったり、デフォルトでついてるスタイルが邪魔だったり…
フォームのデザインは、特にオシャレにする必要もなく、ユーザにとってわかりやすいものにすることがベストです。それ故、一度作ればその後の案件もコピペベースで作ることができます。
この記事では僕が使っているフォームのスタイルを紹介します。
フォームのカスタマイズ
inputのtype属性は色々あるのですが、今回はよく使うもののみを紹介します。ここで紹介したものを使いこなせれば、他のtype属性も少し修正して対応できます。
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;
}
デフォルトでついているラジオボタンを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;でボーダーも消すのを忘れないでください。
まとめ
フォームを見やすくオシャレにする方法を紹介しました。ブラウザ対応などが少し面倒なだけで、やっていることは簡単なので、この機会にこんなことも出来ると頭に入れておくと良いでしょう。
プログラミングもコーディングも暗記する必要は無いので、ブックマークでもしてやってください。
また、フォームでの離脱を防ぐための対策でEFO(エントリーフォーム最適化)というものがあります。興味がある方はググってみてください。
中級者向けのコーディング練習教材作りました！
初心者を半歩くらい脱した方向けにコーディング練習教材作りました。
ただコードの解説をするだけではなく、コードを書く際の考え方、実際に仕事をする上で気をつける点、SEO的なことなどを入れています。
こんな事を考えながら書くのか！と、これまで知らなかった事を知れる『気づき』があれば幸いです。
この記事を書いた人
