自己紹介
■コスゲタツヤ (@keinkosuge)
30歳になる直前でデジハリに入学。
その後、何故か中のスタッフになり、2年弱程
STUDIO渋谷&新宿の運営業務をメインに行う。
その後、Keinousの屋号で2014/10から制作専念。
自己紹介
■コスゲタツヤ (@keinkosuge)
・Keinousとして個人で活動
・新宿にある某会社に常駐
・デジタルハリウッドSTUDIO渋谷&新宿TR
・unitopi(http://unitopi.com/ )さんでライター
・勉強会に最近ちょこちょこ登壇させて頂いてます。
・好きなものは沖縄。
NEW !!!!!!
2/26(木)in デジハリ御茶ノ水校4Fカフェテラス
技術的な話じゃなくて、仕事術とか
生き方的な話をするトークイベントに出ます。
https://atnd.org/events/62303
もう1つ 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
■appearanceプロパティ
超簡単にいうと、要素のUIを指定できる。
フォームデザインのカスタマイズをするときは
大体、appearance:none を指定するが、
それ以外にもいろいろ指定できる。
※もれなく、ベンダープレフィックスつき
-webkit-appearance:none などなど
■appearanceプロパティ
select {
appearance:none;
-webkit-appearance:none;
background:#fff;
/*いろいろここで指定できる*/
}
■デモを作ってみた
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
【どうしても統一したい場合の対策】
checkboxやradioそのものはdisplay:noneして
label要素とbeforeやafterの疑似要素をうまいこと駆使する。
■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
■:focus
ChromeやSafariは要素にフォーカスした際に
デフォルトの場合はぼかし気味の青色がborderにつく。
【対策】
input:focus { outline:none; } を指定
■以上をふまえた上での使い分け①
◎IE8以下が入る場合
きっとJSやjQueryのプラグインを使うのが無難。
◎スマホ案件およびスマホ中心
appearance:noneしてそこからカスタマイズで結構いけそう
■以上をふまえた上での使い分け③
◎ブラウザ未対応がまだ多い要素は無理して使わない
未対応要素はinput type=”text” として置き換わるので
だったらはじめからinput type=”text”を使用する。
JSとの併用は常に頭に・・・!
■そもそも見た目だけじゃなくて・・・
ユーザビリティ的なことも考慮した上で
対応する必要がある。
(フォーム→使いにくいとか話にならない)
・簡単な動きをつける
・入力しやすい&触りやすい(スマホ)
様々な観点から考慮する必要がある。