Now Loading...
menu
  • すべて
  • web制作
  • 写真を楽しむ
  • カメラで遊ぶ
  • モノ
  • 旅
  • おすすめツール

知っていると便利。フォームパーツのスタイルいろいろ。

知っていると便利。フォームパーツのスタイルいろいろ。

フォームを作るたびに、わーこれ便利だな、と思ったことなどがあったのに、それがなんだったのかすら思い出せなかったり、これは前にやったような気がするけどどうやるんだっけ?と、いろいろ忘れています。

 

なにも装飾しなくても充分に機能してくれるフォームパーツですが、他のページのデザインと合わせたい、異なるブラウザやデバイスで同じ見た目や動きにしたい、細かい部分にもこだわりたいというときにはぜひ!

 

ここのところフォームを作っていたので、使えそうなものをまとめてみました。

CSSだけでちょっとかわいいラジオボタンなども作れます。

 


その前に。まずはデフォルトで当たっているスタイルを消す

入力欄(input)やプルダウン(select)、テキストエリアなどは、ブラウザによって見た目が異なります。

ボーダーやグラデーション、角丸などのスタイルが当たっているので、まずは各ブラウザのスタイルをリセットしてから装飾。

 

input, textarea, select {
 margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  background: none;
 -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

 

いつもborder:noneを忘れて線が出ています。

 


IEで出てくるinputの「×」ボタンを消したいとき

 

input::-ms-clear {
  visibility: hidden;
}

 


こんなときは属性セレクタを使うと便利

お名前やEmailの入力以外にも、パスワード入力、ご意見ご要望などのテキスト欄・・と、いろいろな要素があるとき、またスタイルがそれぞれに異なる場合は便利です。

 

css

/* input text omly */
input[type="text"] {
  property: value;
}

/* radio button only */
input[type="radio"] {
  property: value;
}

 


placeholder属性のカラー変更

要素の中に入力例を表示させるplaceholder。

 

placeholderの文字色を変えたいときにはこんな書き方。

css

/* Chrome */
::-webkit-input-placeholder {
  color: #777;
}

/* Firefox */
::-moz-placeholder {
  color: #777;
}

/* IE */
:-ms-input-placeholder {
  color: #777;
}

 


ラジオボタンを装飾しよう

cssだけでできるちょっとかわいいラジオボタンです。

 

背景色を変え、もわんと表示させているだけですが、チェックボックス装飾も似たような感じで作れます。

 

html

<input id="label01" type="radio" name="contact-radiobtn" value="いちご">
<label for="label01">いちご</label>

<input id="label02" type="radio" name="contact-radiobtn" value="メロン">
<label for="label02">メロン</label>

 

css

input[type="radio"] {
  display: none;
}
label {
  position: relative;
  display: block;
  padding: 0 0 0 40px;
}
label::after, label::before {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  border-radius: 50%;
}
label::before {
  margin-top: -8px;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #f1efee;
}
labell::after {
  margin-top: -2px;
  left: 5px;
  width: 10px;
  height: 10px;
  background-color: #666;
  opacity: 0;
  -webkit-transition: opacity .25s ease;
  transition: opacity .25s ease;
}
input:checked + label::after,
input:checked + label::after {
   opacity: 1;
}

 


ラジオボタンやチェックボックスはlabelで囲もう

文字の部分にも反応してくれます。

こういうの大事。

 


 

気がついたら2019年も半分終わってしまったじゃないか!

 

ブログを書くのは二週間ぶり。ひさしぶりに書いたら、あれ?どうやって書くんだっけ・・といろいろ忘れていました。

 

 

share on

TIPS&NOTE TOPへ