コピペでできる！cssとhtmlのみでフォームのセレクトボックスをいい感じにするデザイン8選

CSS HTML
 
 

フォームはサイトにはかならず必要になってくるアイテムですが、わかりやすく間違えにくいものにしたいですよね。
わかりやすくていい感じのセレクトボックスを集めました。

また、最後の２つはラジオボタンを使ってセレクトボックスを作っています。
ピロっとでるプルダウンのデザインまで変更したい時はこちらが良いかもしれません。

browser:  ✔︎ ✔︎ ✔︎ 

フォームのチェックボックスをわかりやすくするデザイン[8種]

シンプルなセレクトボックス

ニャン易度 
<div class="cp_ipselect01">
  <select required>
    <option value="" hidden>Choose</option>
    <option value="1">cat</option>
    <option value="2">dog</option>
    <option value="3">rabbit</option>
    <option value="4">squirrel</option>
  </select>
</div>
.cp_ipselect01 {
  position: relative;
  display: flex;
  align-items: center;
  margin: 2em auto;
  border: 1px solid #bbbbbb;
  border-radius: 2px;
}
/*プルダウンの三角を設定*/
.cp_ipselect01::before {
  position: absolute;
  right: 15px;
  content: '';
  width: 16px;
  height: 8px;
  background: #666666;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.cp_ipselect01 select {
  width: 100%;
  padding: 10px 45px 10px 10px;
  color: #666666;
  cursor: pointer;
  text-overflow: ellipsis;/*テキストがオーバーしたら'...'で省略*/
  z-index: 1;
  /* 標準のスタイルを無効にする */
  border: none;
  appearance: none;
  outline: none;
  background: transparent;
}

シンプルなセレクトボックス

ニャン易度 
<div class="cp_ipselect02">
  <select required>
    <option value="" hidden>Choose</option>
    <option value="1">cat</option>
    <option value="2">dog</option>
    <option value="3">rabbit</option>
    <option value="4">squirrel</option>
  </select>
</div>
.cp_ipselect02 {
  position: relative;
  display: flex;
  align-items: center;
  margin: 2em auto;
  border: 1px solid #bbbbbb;
  border-radius: 2px;
}
.cp_ipselect02 select {
  width: 100%;
  padding: 10px 45px 10px 10px;
  color: #666666;
  cursor: pointer;
  text-overflow: ellipsis;/*テキストがオーバーしたら'...'で省略*/
  z-index: 1;
  /* 標準のスタイルを無効にする */
  border: none;
  appearance: none;
  outline: none;
  background: transparent;
}
/*プルダウンの三角と枠を設定*/
.cp_ipselect02::before {
  position: absolute;
  right: 15px;
  content: '';
  width: 16px;
  height: 8px;
  background: #666666;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.cp_ipselect02:after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 45px;
  content: '';
  border-left: 1px solid #bbbbbb;
}

シンプルなセレクトボックス 文字色変更

ニャン易度 
<div class="cp_ipselect03">
  <select required>
    <option value="" hidden>Choose</option>
    <option value="1">cat</option>
    <option value="2">dog</option>
    <option value="3">rabbit</option>
    <option value="4">squirrel</option>
  </select>
</div>
.cp_ipselect03 {
  position: relative;
  display: flex;
  align-items: center;
  margin: 2em auto;
  border: 2px solid #da3c41;
  border-radius: 2px;
}
/*プルダウンの三角を設定*/
.cp_ipselect03::before {
  position: absolute;
  right: 15px;
  content: '';
  width: 16px;
  height: 8px;
  background: #da3c41;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.cp_ipselect03 select {
  width: 100%;
  padding: 10px 45px 10px 10px;
  color: #666666;
  color: #da3c41;
  cursor: pointer;
  text-overflow: ellipsis;/*テキストがオーバーしたら'...'で省略*/
  z-index: 1;
  /* 標準のスタイルを無効にする */
  border: none;
  appearance: none;
  outline: none;
  background: transparent;
}

角丸なセレクトボックス

ニャン易度 
<div class="cp_ipselect04">
  <select required>
    <option value="" hidden>Choose</option>
    <option value="1">cat</option>
    <option value="2">dog</option>
    <option value="3">rabbit</option>
    <option value="4">squirrel</option>
  </select>
</div>
.cp_ipselect04 {
  position: relative;
  display: flex;
  align-items: center;
  margin: 2em auto;
  border: 2px solid #da3c41;
  border-radius: 50px;
}
/*プルダウンの三角を設定*/
.cp_ipselect04::before {
  position: absolute;
  right: 15px;
  content: '';
  width: 16px;
  height: 8px;
  background: #da3c41;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.cp_ipselect04 select {
  width: 100%;
  padding: 10px 45px 10px 10px;
  color: #da3c41;
  cursor: pointer;
  text-overflow: ellipsis;/*テキストがオーバーしたら'...'で省略*/
  z-index: 1;
  /* 標準のスタイルを無効にする */
  border: none;
  appearance: none;
  outline: none;
  background: transparent;
}

角丸なセレクトボックス 背景塗り潰し

ニャン易度 
<div class="cp_ipselect05">
  <select required>
    <option value="" hidden>Choose</option>
    <option value="1">cat</option>
    <option value="2">dog</option>
    <option value="3">rabbit</option>
    <option value="4">squirrel</option>
  </select>
</div>
.cp_ipselect05 {
  position: relative;
  display: flex;
  align-items: center;
  margin: 2em auto;
  border: 2px solid #da3c41;
  border-radius: 50px;
  background: #da3c41;
}
/*プルダウンの三角を設定*/
.cp_ipselect05::before {
  position: absolute;
  right: 15px;
  content: '';
  width: 16px;
  height: 8px;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.cp_ipselect05 select {
  width: 100%;
  padding: 10px 45px 10px 10px;
  color: #ffffff;
  cursor: pointer;
  text-overflow: ellipsis;/*テキストがオーバーしたら'...'で省略*/
  z-index: 1;
  /* 標準のスタイルを無効にする */
  border: none;
  appearance: none;
  outline: none;
  background: transparent;
}

フォーカスで下線の色が真ん中から替わる

ニャン易度 
<div class="cp_ipselect06">
  <select class="cp_sl06" required>
    <option value="" hidden disabled selected></option>
    <option value="1">cat</option>
    <option value="2">dog</option>
    <option value="3">rabbit</option>
    <option value="4">squirrel</option>
  </select>
  <span class="cp_sl06_selectbar"></span>
  <label class="cp_sl06_selectlabel">Choose</label>
</div>
.cp_ipselect06 {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 2em auto;
}
.cp_ipselect06 .cp_sl06 {
  position: relative;
  width: 100%;
  height: 48px;
  cursor: pointer;
  text-overflow: ellipsis;/*テキストがオーバーしたら'...'で省略*/
  z-index: 1;
  /* 標準のスタイルを無効にしborder-bottomを設定 */
  border: none;
  appearance: none;
  outline: none;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid #666666;
}
/*プルダウンの三角を設定*/
.cp_ipselect06::after {
  position: absolute;
  right: 15px;
  content: '';
  width: 16px;
  height: 8px;
  background: #666666;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.cp_sl06_selectlabel {
  position: absolute;
  left: 0;
  top: 10px;
  color: #666666;
  transition: 0.2s ease all;
}
/*選択した際の動き:「Choose」の文字*/
.cp_sl06:focus ~ .cp_sl06_selectlabel,
.cp_sl06:valid ~ .cp_sl06_selectlabel {
  color: #da3c41;
  top: -20px;
  transition: 0.2s ease all;
  font-size: 80%;
}
/*選択した際の動き:セレクト下のライン*/
.cp_sl06_selectbar {
  position: relative;
  display: block;
  width: 100%;
}
.cp_sl06_selectbar:before,
.cp_sl06_selectbar:after {
  bottom: 1px;
  content: '';
  width: 0;
  height: 2px;
  position: absolute;
  background: #da3c41;
  transition: 0.2s ease all;
}
.cp_sl06_selectbar:before {
  left: 50%;
}
.cp_sl06_selectbar:after {
  right: 50%;
}
/*focus時の設定*/
.cp_ipselect06 .cp_sl06:focus {
  border-bottom: 1px solid transparent;
}
.cp_sl06:focus ~ .cp_sl06_selectbar:before,
.cp_sl06:focus ~ .cp_sl06_selectbar:after {
  width: 50%;
}

ラジオボタンを使って作るセレクトボックス

ニャン易度
Choose 
<div class="cp_ipselect07">
  <input type="radio" name="option">
  <i class="toggle cp_sl07_arrowdown"></i>
  <i class="toggle cp_sl07_arrowup"></i>
  <span class="cp_sl07_selectlabel">Choose</span>
  <label class="option">
  <input type="radio" name="option">
  <span class="cp_sl07_title">cat</span>
  </label>
  <label class="option">
  <input type="radio" name="option">
  <span class="cp_sl07_title">dog</span>
  </label>
  <label class="option">
  <input type="radio" name="option">
  <span class="cp_sl07_title">rabbit</span>
  </label>
  <label class="option">
  <input type="radio" name="option">
  <span class="cp_sl07_title">squirrel</span>
  </label>
</div>
.cp_ipselect07 {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  margin: 2em auto;
}
/*ラジオボタンの制御*/
.cp_ipselect07 > input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 56px;
  cursor: pointer;
  opacity: 0;
}
.cp_ipselect07 label.option input {
  display: none;
}
.cp_ipselect07 > i.toggle {
  position: absolute;
  z-index: 4;
  top: 1.6em;
  right: 1.5em;
  color: #ffffff;
}
/*プルダウンの三角を設定*/
.cp_ipselect07 .cp_sl07_arrowup:before {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 16px;
  height: 8px;
  background: #ffffff;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  transition: all 250ms cubic-bezier(.4,.25,.3,1);
}
.cp_ipselect07 .cp_sl07_arrowdown:before {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 16px;
  height: 8px;
  background: #ffffff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: all 250ms cubic-bezier(.4,.25,.3,1);
}

.cp_ipselect07 .cp_sl07_title,
.cp_ipselect07 .cp_sl07_selectlabel {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background: #da3c41;
}
/*ラジオボタンにチェックが入っていない時の処理*/
.cp_ipselect07 > input:not(:checked) {
  z-index: 4;
}
.cp_ipselect07 > input:not(:checked) ~ label.option > span.cp_sl07_title {
  display: none;
}
.cp_ipselect07 > input:not(:checked) ~ i.toggle.cp_sl07_arrowup {
  display: none;
}
.cp_ipselect07 > input:not(:checked) ~ i.toggle.cp_sl07_arrowdown {
  display: block;
}
/*ラジオボタンにチェックが入った時の処理*/
.cp_ipselect07 > input:checked ~ i.toggle.cp_sl07_arrowdown {
  display: none;
}
.cp_ipselect07 > input:checked ~ i.toggle.cp_sl07_arrowup {
  display: block;
}
.cp_ipselect07 > input:checked div.options label.option .cp_sl07_title {
  display: none !important;
}
.cp_ipselect07 label.option input:checked ~ span.cp_sl07_title {
  position: absolute;
  z-index: 3;
  top: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 56px;
  color: inherit;
  border-top: 0;
  background: #1b2538;
}
/*セレクト内テキストの設定*/
.cp_ipselect07 > span.cp_sl07_selectlabel,
.cp_ipselect07 label.option {
  display: flex;
  align-items: center;
  width: 100%;
  height: 56px;
  color: #ffffff;
  border-top: 0;
  transition: all 1s ease-out;
}
.cp_ipselect07 > span.cp_sl07_selectlabel {
  padding-left: 1em;
}
.cp_ipselect07 label.option span.cp_sl07_title {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 2em;
  height: 56px;
  z-index: 2;
  transition: 0.3s ease-out;
}
.cp_ipselect07 label.option span.cp_sl07_title:hover {
  color: #ffffff;
  background: #1b2538;
}

ラジオボタンを使って作るセレクトボックス2

ニャン易度
  • Choose 
<div class="cp_ipselect08">
<ul class="cp_sl08">
  <li>
    <input class="cp_sl08_close" type="radio" name="awesomeness" id="close" value=""/>
    <span class="cp_sl08_label cp_sl08_placeholder">Choose</span>
  </li>
  <li class="cp_sl08_items">
    <input class="cp_sl08_expand" type="radio" name="option08" id="opener"/>
    <label class="cp_sl08_closeLabel" for="close"></label>
    <ul class="cp_sl08_options">
      <li>
        <input class="cp_sl08_input" type="radio" name="option08" id="cat"/>
        <label class="cp_sl08_label" for="cat">cat</label>
      </li>
      <li>
        <input class="cp_sl08_input" type="radio" name="option08" id="dog"/>
        <label class="cp_sl08_label" for="dog">dog</label>
      </li>
      <li>
        <input class="cp_sl08_input" type="radio" name="option08" id="rabbit"/>
        <label class="cp_sl08_label" for="rabbit">rabbit</label>
      </li>
      <li>
        <input class="cp_sl08_input" type="radio" name="option08" id="squirrel"/>
        <label class="cp_sl08_label" for="squirrel">squirrel</label>
      </li>
    </ul>
    <label class="cp_sl08_expandLabel" for="opener"></label>
  </li>
</ul>
</div>
.cp_ipselect08 * {
  position: relative;
  margin: 0;
  padding: 0;
}
.cp_sl08 {
  display: block;
  width: 100%;
  margin: 2em auto;
  cursor: pointer;
}
/*ラジオボタンの制御*/
.cp_ipselect08 input {
  margin: 0;
  background: transparent;
  outline: none;
  border: none;
  appearance: none;
  display:none;
}
.cp_sl08_input,
.cp_sl08_close {
  display: none;
}
.cp_ipselect08 ul {
  list-style: none;
  padding: 0;
}
.cp_sl08_expand {
  position: relative;
  top: 0;
  right: 0;
  width: 0;
  height: 40px;
}
/*プルダウンの三角を設定*/
.cp_sl08_expandLabel,
.cp_sl08_closeLabel {
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
.cp_sl08_expandLabel {
  display: block;
}
.cp_sl08_expandLabel::after {
  position: absolute;
  top: 1.2em;
  right: 0.5em;
  content: '';
  width: 16px;
  height: 8px;
  background: #aaa;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: all 250ms cubic-bezier(0.4,0.25,0.3,1);
  z-index: 2;
  opacity: 0.6;
}
.cp_sl08_closeLabel {
  display: none;
}
.cp_sl08_closeLabel::after {
  position: absolute;
  top: 1.2em;
  right: 0.5em;
  content: '';
  width: 16px;
  height: 8px;
  background: #aaa;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
  transition: all 250ms cubic-bezier(0.4,0.25,0.3,1);
  z-index: 2;
  opacity: 0.6;
}
/*選択肢部分*/
.cp_sl08_items {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 2px solid #da3c41;
  border-radius: 2px;
  padding-top: 40px;
}
.cp_sl08_label {
  display: flex;
  align-items: center;
  height: 0;
  overflow: hidden;
  padding-left: 20px;
  color: #3e3e3e;
  background-color: #ffffff;
  cursor: pointer;
  transition: all 250ms cubic-bezier(0.4,0.25,0.3,1);
}
.cp_sl08_placeholder {
  height: 40px;
  vertical-align: middle;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.6;
  background-color: transparent;
}
/*ラジオボタンにチェックが入った時の処理*/
.cp_sl08_expand:checked + .cp_sl08_closeLabel {
  display: block;
}
.cp_sl08_expand:checked + .cp_sl08_closeLabel + .cp_sl08_options .cp_sl08_label {
  height: 40px;
}
.cp_sl08_expand:checked + .cp_sl08_closeLabel + .cp_sl08_options .cp_sl08_label:hover {
  background-color: #f7f7f7;
}
.cp_sl08_expand:checked + .cp_sl08_closeLabel + .cp_sl08_options + .cp_sl08_expandLabel {
  display: none;
}
.cp_sl08_input:checked + .cp_sl08_label {
  height: 40px;
  margin-top: -40px;
}

ラジオボタンの装飾についてはこちら

copypet.jp

コピペでできる！cssとhtmlのみでフォームのラジオボタンをわかりやすくするデザイン10選 | copypet.jp

フォームはサイトにはかならず必要になってくるアイテムですが、わかりやすく間違えにくいものにしたいですよね。 ラジオボタン[input type="radio"]のデザインにエフェクトを追加することで、 今までよりワンランク上のわかりやすさを手に入れましょう。…

copypet.jp

記事を見る

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか？