フォームをちょっとデザイン性をアップさせたい
| HTML / CSSフォームって大体のサイトに使いますよね。
お問い合わせフォームなどはだいたいあると思います。
なくても、検索窓があったりとか？
デフォルトだと、ブラウザ依存になりますよね。
モバイルだと結構ダッサイのがでちゃいますよね。
ってことで、カスタマイズしちゃいましょう。
カスタマイズするにも簡単がいいですよね
カスタマイズするにも簡単がいいですよね。
出来るだけCSSだけで、やっちゃいます。
CSSでカスタムする場合は、デフォルト設定を無効にするという作業が発生しますよね。
appearance を使うとデフォルトを無効できますが、
対応してないブラウザがあります。
IEはだめですね。それ以外はだいたいいけますが、使えないブラウザがあるということは、これは完璧ではないですね。
まだ、極力控えたほうがいいみたいですね。（よく使ってました、改めて調べるとやべーなって思います。）
ライブラリはなしで、極力CSSだけ、selectだけはJSちょっとだけ
appearance を使わないでも、なんとかなります。
CSSとちょっとのJSで、OKです。
JSは、一回書いたら（コピーしたら）それ使いまわせますので、ほぼJSは気にしなくてOKかと、
CSSはサイトのデザインによっては、少しいじるぐらいでしょうか。
そんなに大きくは変わらないと思います。
CSSも、面倒なので、_form.scssとか作って、そこにぶち込んでおきます。
input[type=text],textarea
テキストとテキストエリアは、ほとんど一緒ですよね。
ポイントはこんな感じ
- デフォルトのCSSをリセット
- 横幅は親要素に任せるため
width: 100%;を指定 - 選択（focus）時に色付
- textareaのテキストはtextareaのrowで設定したほうが楽かもｗ
See the Pen input[type=”text”], textarea by msys (@msys) on CodePen.
input[type=radio]
ラジオボタンはデフォルトのボタンを非表示にしてデザイン作っちゃいます。
- ボタンの表示を消す
- before/afterを使ってボタンを作る
- checked使って選択した時のデザインを制御
- ちょっくらアニメーションも付けてみるといいかも
See the Pen radiobutton by msys (@msys) on CodePen.
input[type=checkbox]
これもラジオボタンと一緒と同じ要領ですね。
- checkboxは消しちゃう
- before/after使ってボックス生成
- :checked使って選択した時のデザインを制御
- アニメーションついたらちょっと(￣ー￣)ﾆﾔﾘ
transitionをallにするとふわっとでるだけだけど、border-bottom-color,border-right-colorにすると、チェックを入れたようなアニメーションになる
See the Pen input[type=checkbox] by msys (@msys) on CodePen.
input[type=submit], button
ここだけ、iOSが悪さをしちゃいます。強制リセット使います。
これ使わないと、強制的にすんごい角丸のエンボスかかったデザインになっちゃいます。
iOSには使えるので問題はない。
- iOSのために
appearance: none;を使って、デフォルトの設定をリセット - あとはCSSで簡単に制御できる
See the Pen input[type=submit], button by msys (@msys) on CodePen.
select
selectだけ、面倒です。
JS使います。気をつけてください。
JSに関しては、クラスの部分だけ、気をつけてもらえれば問題なし。
このままクラスも一緒なら、コピペでOKっす。
- select自体は見えないようにして、クリックした時は表示
- before/afterを使ってちょこっとデザイン
- 選択した時にvalue値を表示するために空ボックスを用意
空ボックスにvalue値を表示するためにJSを使う
See the Pen select by msys (@msys) on CodePen.
いかがでしたか？
結構、簡単にできるかと思います。
SCSS使ってる人とかは、デザイン変更する部分の数値とかを変数使って抜き出していれば更に簡単に出来るんじゃないかなと思います。
本当にちょっとしたことで、サイトの印象が変わると思うので、細部まで気にしてみてはいかがでしょうか。
ではまたー
