【CSS】input要素をカスタマイズするには？type属性ごとのサンプルコードも紹介

input要素をCSSでカスタマイズしようとしても上手くいかない、なんて悩んではいませんか？

input要素は、type属性によって表示が異なり、指定できるスタイルもがらりと変わりますよね。

今回は、input要素をCSSでカスタマイズしたいという方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、input要素にCSSを使ったカスタマイズが思い通りにできるようになりますよ。

ぜひ最後まで読んでくださいね！

input要素を見やすくカスタマイズ

input要素は、初期の設定では見栄えがあまり良くなく、サイトに馴染みにくいときがありますよね。

type属性によって表示の仕方がバラバラなので、デザインを揃えたくても難しいと感じることがあります。

今回の記事では、以下のtype属性について、それぞれのカスタマイズ例を紹介します。

他にも「radio」などのtype属性がありますが、上記のものを応用してスタイルが作れるはずです。

共通のスタイルとして、以下のCSSを利用しますね。

html {
  box-sizing: border-box;
  font-size: 16px;
}

「box-sizing:border-box」により、要素のサイズがpaddingとborderを含んだものになります。

要素の横幅を100%にしたときに、枠線が画面内からはみ出るのを回避することができます。

その他にも、親要素から枠線の太さ分はみ出てしまう、といった問題も避けられます。

レスポンシブデザインにする際には重宝する指定なので、普段から指定しておいた方が良いかもしれませんね。

また、フォームを作成する際には、文字のサイズを16px以上にしましょう。

16px以下の場合、iOSなど一部の環境では、入力時にズーム機能が自動で働きます。

人によっては挙動が鬱陶しく感じることもありますので、16px以上にしておくことをおすすめします。

では、それぞれのtype属性のスタイルを見ていきましょう。

type=”text”について

textは1行のテキスト入力ができるフォームを作成します。

ここでは、枠線の色とフォーカスさせたときのデザインを変更していきますね。

<input type="text" name="name" placeholder="名前入力"  class="textbox">

.textbox {
  width: 200px;
  padding: 3px 7px;
  border-radius: 5px;
  border: 2px solid #ccc;
}
.textbox:focus {
  outline: 0;
  border: 2px solid #2196f3;
}

フォーカスしたときにぱっと色が切り替わるように、「box-shadow」で枠線を作っています。

「outline: 0」はデフォルトのアウトラインを削除する指定です。

アウトラインを削除する場合には、今回のように別の方法でフォーカス表示をする必要があります。

type=”checkbox”について

checkboxは項目を選択できるチェックボックスを作成します。

チェックボックスをそのまま削除して、疑似要素のbeforeとafterを使ってオリジナルのチェックボックスを作成していきます。

同じ方法を使えば、type=”radio”もデザインできますね。

<input type="checkbox" id="checkbox01" name="checkbox01" checked>
<label for="checkbox01" class="checkbox">お見積もり</label>
<input type="checkbox" id="checkbox02" name="checkbox02">
<label for="checkbox02" class="checkbox">資料請求</label>
<input type="checkbox" id="checkbox03" name="checkbox03">
<label for="checkbox03" class="checkbox">ご相談</label>

input[type=checkbox]  {
  display: none;
}
.checkbox {
  cursor: pointer;
  display: inline-block;
  padding: 5px 30px;
  position: relative;
  width: auto;
  color: #666;
  user-select:none;
}
.checkbox:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 5px;
  display: block;
  height: 16px;
  width: 16px;
  margin-top: -8px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #aaa;
}
.checkbox:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 10px;
  display: block;
  height: 9px;
  width: 5px;
  margin-top: -7px;
  border-right: 3px solid #2196f3;
  border-bottom: 3px solid #2196f3;
  opacity: 0;
  transform: rotate(45deg);
}
input[type=checkbox]:checked + .checkbox::after {
  opacity: 1;
}

beforeではチェックボックスの枠の部分、afterではチェックマークの部分を作っています。

チェックマークは「opacity: 0」で透明にしておき、チェックボックスが「checked」の状態になったときに、「opacity: 1」で表示させています。

type=”submit”について

submitは、フォームの送信ボタンを作成するプロパティです。

デフォルトの設定を削除して、新しくスタイルを付け加えていきます。

<input type="submit" value="送信" class="btn-submit">

.btn-submit{
  display: block;
  padding: 7px 25px;
  border-radius: 7px;
  border: none;
  border-bottom: 4px solid #1d7dcc;
  background-color: #2196f3;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  appearance: none;
}
.btn-submit:active {
  margin-top: 3px;
  background-color: #309bf2;
  border-bottom: 2px solid #006366;
}

新しく追加した部分は、リンクなどのボタンを作成するときと変わりないですね。

まとめ：input要素をおしゃれにカスタマイズ

今回は、input要素をtype属性ごとにカスタマイズ例を紹介してきました。

カスタマイズするときの注意点なども説明してきましたね。

input要素をデザインする際に、今回の記事が参考になれば幸いです。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！