ブログBLOG

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

更新日：2014/07/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>

checkbox1

</label>

radio1

</label>

<span class="ph">placeholder</span>

</span>

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

/* 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');