2 24 cssでのフォームカスタマイズ
TRANSCRIPT
CSSでのフォームカスタマイズ
2015.2.24
自己紹介
■コスゲタツヤ （@keinkosuge）
30歳になる直前でデジハリに入学。
その後、何故か中のスタッフになり、２年弱程
STUDIO渋谷＆新宿の運営業務をメインに行う。
その後、Keinousの屋号で2014/10から制作専念。
自己紹介
■コスゲタツヤ （@keinkosuge）
・Keinousとして個人で活動
・新宿にある某会社に常駐
・デジタルハリウッドSTUDIO渋谷&新宿TR
・unitopi（http://unitopi.com/ )さんでライター
・勉強会に最近ちょこちょこ登壇させて頂いてます。
・好きなものは沖縄。
NEW !!!!!!
2/26（木）in デジハリ御茶ノ水校４Fカフェテラス
技術的な話じゃなくて、仕事術とか
生き方的な話をするトークイベントに出ます。
https://atnd.org/events/62303
もう１つ NEW !!!!!
「セルフキッチン」in 東中野
3/2から日中の時間帯を使った、
コワーキングスペースが始まります。
https://www.facebook.com/selfkitchen.coworking
本日のテーマ：CSSフォームカスタマイズ
おしゃれ且つ使いやすいフォームデザイン
増えているなぁと思っております。
先日、フォームカスタマイズの内容で
どはまりした経験をしたのと、今日が
CSS DAYなのでこのテーマで話すことにしました。
■form関係のタグはたくさん
・input [ type = ”text” ]
・input [ type = ”radio” ]
・input [ type = ”checkbox” ]
・input [ type = “submit” ]
・select
・option
・button
・textarea
■form関係タグの見た目はブラウザで違う
Chrome
Safari
Firefox
IE
■appearanceプロパティ
超簡単にいうと、要素のUIを指定できる。
フォームデザインのカスタマイズをするときは
大体、appearance:none を指定するが、
それ以外にもいろいろ指定できる。
※もれなく、ベンダープレフィックスつき
-webkit-appearance:none などなど
■appearanceプロパティ
select {
appearance:none;
-webkit-appearance:none;
background:#fff;
/*いろいろここで指定できる*/
}
これからの時代はCSSだけで
自由にフォームデザインできる？
■ブラウザ対応（ caniuse.com より）
IEまるで対応していない・・・
■デモを作ってみた
http://jsdo.it/castero/i70R
（だいたいのform系タグを並べてカスタマイズ）
■input type=”text”,submit
デフォルト状態でブラウザ間にそんなに差異はない。
iOSだとデフォルトで角丸になる。
appearance=”none” で解決。
一応background-colorは指定。
■textarea
IEだと、文章が0の状態でも
右側に上下矢印が表示される。
【対策】
scrollbar-arrow-color プロパティで
テキストフィールドと同じ色を指定。
（9以下もOK）
■selectbox（矢印消し）
【Firefox35〜(2015/1/13リリース）】
-moz-appearanceの指定のみでOK
【〜Firefox29】
-moz-appearance:none text-indent: 0.01pxtext-overflow: ' '
（Firefox30〜34はハックでも消せない。。。らしい）
■selectbox（矢印消し）
【IE10,IE11】
select::-ms-expand { display:none }
IE9までやるなら
親div（親要素）のwidth短くして
overflow:hiddenする等。
■checkbox , radio
【Firefox】
-moz-appearance:noneしても左と上に内影が出来る。
【IE10,IE11】
appearanceが効かないのでデフォルトから変わらない
■checkbox , radio
【Chrome,Safari,スマホ】
appearance:noneするとすべて消える
0ベースから装飾
appearanceとかだけではUIの統一は無理
■checkbox , radio
【どうしても統一したい場合の対策】
checkboxやradioそのものはdisplay:noneして
label要素とbeforeやafterの疑似要素をうまいこと駆使する。
■:checked （CSS3）
chromeとSafariはチェックされてるのかどうか
何にも指定していないと全くわからない。
対策はcheckboxとradioのところで述べた通り。
■input type=”number”（矢印）
【Chrome,Safari,スマホ】
input[type=number]::-webkit-inner-spin-button
input[type=number]::-webkit-outer-spin-button
上記セレクタにappearance:noneを指定
■input type=”number”（矢印）
でもFirefoxやIEは消えない。。。（IEは対応してないVerも）
【対策】
対応していない場合ブラウザはそのinput要素をinput=”text”として認識
するので、今はまだ使わないのが無難。
■input type=”range”
【Safari Chrome】
input[type=range]::-webkit-slider-thumb{
appearance:none;
}
【IE10〜】
https://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx
■input type=”range”
でもFirefoxやスマホだと完全にうまくいかず。
なのでまだ使わないのが無難。
■:focus
ChromeやSafariは要素にフォーカスした際に
デフォルトの場合はぼかし気味の青色がborderにつく。
【対策】
input:focus { outline:none; } を指定
CSSのみでフォーム
カスタマイズするのは
結構大変
■以上をふまえた上での使い分け①
◎IE8以下が入る場合
きっとJSやjQueryのプラグインを使うのが無難。
◎スマホ案件およびスマホ中心
appearance:noneしてそこからカスタマイズで結構いけそう
■以上をふまえた上での使い分け②
◎IE9とかIE10以上でいいけどなるべく全ブラウザ対応させたい
:beforeとか:afterの力も借りる。
でもコード長くなって大変そう。
■以上をふまえた上での使い分け③
◎ブラウザ未対応がまだ多い要素は無理して使わない
未対応要素はinput type=”text” として置き換わるので
だったらはじめからinput type=”text”を使用する。
JSとの併用は常に頭に・・・！
■無難なやつ
・input
・textarea
・select
・radio && checkbox （label駆使して）
■そもそも見た目だけじゃなくて・・・
ユーザビリティ的なことも考慮した上で
対応する必要がある。
（フォーム→使いにくいとか話にならない）
・簡単な動きをつける
・入力しやすい＆触りやすい（スマホ）
様々な観点から考慮する必要がある。
今日のサンプル
http://jsdo.it/castero/i70R/
ありがとうございました。