← Hubに戻る

フォーム素材

テキスト入力

<input class="input" type="text" placeholder="テキストを入力">
.input {
  padding: 10px 16px;
  border: 2px solid #4f8cff;
  border-radius: 6px;
  font-size: 1.1em;
  outline: none;
  transition: border 0.2s;
}
.input:focus {
  border-color: #ff6ec4;
}

チェックボックス

<input class="checkbox" type="checkbox" id="cb1"><label for="cb1"> チェック</label>
.checkbox {
  accent-color: #4f8cff;
  width: 20px; height: 20px;
}

ラジオボタン

<input class="radio" type="radio" id="r1" name="r"><label for="r1"> A</label>
<input class="radio" type="radio" id="r2" name="r"><label for="r2"> B</label>
.radio {
  accent-color: #ff6ec4;
  width: 20px; height: 20px;
}

セレクトボックス

<select class="select"><option>選択肢1</option><option>選択肢2</option></select>
.select {
  padding: 10px 16px;
  border: 2px solid #4f8cff;
  border-radius: 6px;
  font-size: 1.1em;
  background: #fff;
  color: #4f8cff;
}

スライダー

<input class="input-slider" type="range" min="0" max="100">
.input-slider {
  width: 180px;
  accent-color: #ff6ec4;
}

パスワード入力

<input class="input" type="password" placeholder="パスワード">
.input {
  padding: 10px 16px;
  border: 2px solid #4f8cff;
  border-radius: 6px;
  font-size: 1.1em;
  outline: none;
  transition: border 0.2s;
}
.input:focus {
  border-color: #ff6ec4;
}

テキストエリア

<textarea class="input" rows="3" placeholder="メッセージを入力"></textarea>
.input {
  padding: 10px 16px;
  border: 2px solid #4f8cff;
  border-radius: 6px;
  font-size: 1.1em;
  outline: none;
  transition: border 0.2s;
}
.input:focus {
  border-color: #ff6ec4;
}

トグルスイッチ

<label class="switch"><input type="checkbox"><span class="switch-slider"></span></label>
.switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 30px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #ccc;
  border-radius: 30px;
  transition: .3s;
}
.switch-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background: #fff;
  border-radius: 50%;
  transition: .3s;
}
.switch input:checked + .switch-slider {
  background: #4f8cff;
}
.switch input:checked + .switch-slider:before {
  transform: translateX(24px);
}

ファイル選択

<input class="input-file" type="file">
.input-file {
  padding: 8px 0;
  font-size: 1.05em;
  color: #4f8cff;
}

日付ピッカー

<input class="input" type="date">
.input {
  padding: 10px 16px;
  border: 2px solid #4f8cff;
  border-radius: 6px;
  font-size: 1.1em;
  outline: none;
  transition: border 0.2s;
}
.input:focus {
  border-color: #ff6ec4;
}