BLOG

フォームをちょっとデザイン性をアップさせたい

2018.04.09 | HTML/CSS/PHP、JavaScript

フォームって大体のサイトに使いますよね。
お問い合わせフォームなどはだいたいあると思います。
なくても、検索窓があったりとか？

デフォルトだと、ブラウザ依存になりますよね。
モバイルだと結構ダッサイのがでちゃいますよね。
ってことで、カスタマイズしちゃいましょう。

カスタマイズするにも簡単がいいですよね

カスタマイズするにも簡単がいいですよね。
出来るだけCSSだけで、やっちゃいます。
CSSでカスタムする場合は、デフォルト設定を無効にするという作業が発生しますよね。

appearance を使うとデフォルトを無効できますが、
対応してないブラウザがあります。
IEはだめですね。それ以外はだいたいいけますが、使えないブラウザがあるということは、これは完璧ではないですね。
まだ、極力控えたほうがいいみたいですね。（よく使ってました、改めて調べるとやべーなって思います。）

Can I Use css-appearance? Data on support for the css-appearance feature across the major browsers from caniuse.com.

ライブラリはなしで、極力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.