[HTML] シンプルで幅広いカスタマイズができるform

投稿日:2014年7月25日

web ページを制作する際 form まわりは時間のかかる作業のひとつです。form 部品の表示はブラウザごとや機種ごとでかなりバラつきがあるため、なかなかうまくいきません。

できるだけシンプルに、幅広いカスタマイズができるようなパターンを考えてみたいと思います。

※HTML5 対応ブラウザで確認ください。

HTML


<label class="checkbox">
  <input type="checkbox" name="" value="">
  <span class="s"></span>
  checkbox1
</label>

<label class="radio">
  <input type="radio" name="radio" value="">
  <span class="s"></span>
  radio1
</label>

<span class="input-text">
  <input type="text" name="" value="">
  <span class="ph">placeholder</span>
</span>

<div class="item">
  <span class="textarea">
    <textarea></textarea>
    <span class="ph">placeholder</span>
  </span>
</div>

CSS では before 擬似要素にスタイルをあてることで画像を使ったデザイン等も反映できます。

CSS


/* checkbox
--------------------------------------*/

.checkbox {
  cursor: pointer;
  display: inline-block;
  line-height: 20px;
  margin: 4px 80px 4px 0;
  padding: 0 0 0 24px;
  position: relative;
}

.checkbox>input {
  display: none;
}

.checkbox>.s {
  background: #fff;
  border: solid 1px #aaa;
  border-radius: 2px;
  display: block;
  height: 18px;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 18px;
}

.checkbox>input:checked+.s {
  background: #4cd964;
}

.checkbox>input:checked+.s:before {
  color: #fff;
  content: '\2713';
  font-weight: bold;
}

/* radio
--------------------------------------*/

.radio {
  border: solid 1px #aaa;
  cursor: pointer;
  display: inline-block;
  line-height: 28px;
  margin: 4px 0;
  min-width: 160px;
  padding: 0 0 0 32px;
  position: relative;
}

.radio>input {
  display: none;
}

.radio>.s {
  left: 8px;
  position: absolute;
  top: 0;
}

.radio>input:checked+.s:before {
  color: #34aadc;
  content: '\2714';
}

/* text, textarea
--------------------------------------*/

.input-text,
.textarea {
  background: #fff;
  border: solid 1px #aaa;
  border-radius: 2px;
  position: relative;
}

.input-text>input,
.textarea>textarea {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: 1.2;
  margin: 0;
  outline: 0;
  padding: 0;
  width: 100%;
}

.input-text>.ph,
.textarea>.ph {
  color: #999;
  cursor: text;
  display: none;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
}

.input-text>.ph.active,
.textarea>.ph.active {
  display: block;
}

.input-text {
  display: inline-block;
  padding: 6px 8px 4px;
  width: 200px;
}

.input-text>.ph {
  padding: 6px 8px 4px;
}

.textarea {
  display: block;
  padding: 8px 2px 8px 8px;
}

.textarea>textarea {
  min-height: 3.6em;
  resize: none;
}

.textarea>.ph {
  padding: 8px 2px 8px 8px;
}

JavaScript (with jQuery)


$('.ph').on('click', function () {
    $(this).prev().trigger('focus');
}).prev().on('focus', function () {
    $(this).next().removeClass('active');
}).on('blur', function () {
    var $this = $(this);
    var val = $this.val();

    if ('' === val) {
        $this.next().addClass('active');
    }
}).trigger('blur');


(藤崎)

関連記事

  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル