【css】どこまでselectをデフォルトの状態で装飾出来るか
納期に追われて時間が無かった為、久しぶりの投稿となります。
今回は、簡単なことでしたが、随分とハマってしまったselectの装飾をメモしたいと思います。
目的
「デフォルト状態」のデザインを弄らずに装飾を行いたい
先に結論から言うと、この「デフォルト状態」ってのミスリードを誘った原因です。こいつが厄介だったわけですね。
何を勘違いしてハマったかは今回のテーマにも関係していくので、順々に分かり易く伝えられたらと思います。
通常selectをレイアウトするには?
まず先に述べておきますが、通常デザインされていないselect(プルダウン)を用いることはあまりないと考えていいでしょう。
なのに何故デフォルトを装飾する必要があるのか?
それはデザイン資料が足りず、最低限のトンマナを揃えて表示しておく時など、特定の要望があった場合に限られると思います。
なので今回は特殊なケースとなりますが、覚えておいて損はないと思います。
話を戻して、まずは通常selectを装飾する簡単な例をメモ。
HTML
<span>
<select>
<option>テストボックス</option>
</select>
</span>
span {
position: relative;
display: inline-block;
width: 200px;
border: solid 1px#bfbfbf;
}
span:after {
content: "\25BC";
position: absolute;
top: 50%;
right: 0px;
margin-right: 5px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: -1;
}
select, option {
width: 100%;
height: 30px;
line-height: 30px;
padding: 0px;
margin: 0;
text-indent: 1em;
background-color: transparent;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
}
さて、ここは 本題とはあまり関係ないので説明はサックリと。
selectにデザインを装飾する場合はappearanceを用いてデフォルトレイアウトをリセットします。
で、selectに色々付いている背景色やborderやらのデザインもリセットして、
appearance:noneで消えてしまった矢印アイコンをspanのafter要素として作成します。
(※selectやinputにはbeforeやafterは設定出来ません。)
もちろん、文字化け防止の為のencodeやらクロスブラウザ対応の為の-webkitなどの表示は行うことは前提で行きましょう。
ここを細かくさらうと一つの記事が書けてしまうので、そこはまた今度。
ちなみに上記の設定をするとこんな感じに表示されます。
そもそもデフォルト状態とは?
デフォルトの見た目はブラウザ毎に異なりますが、大体はこんな見た目ではないでしょうか?
ですが、このデフォルトデザイン、appearanceを用いなくても他のbackgroundやborderを変えるだけで簡単に変わってしまいます。
こんな感じで。
これってデフォルトだけどデフォルトじゃないような…。
線引が微妙な気がしますけど、もし「デフォルトで」と言われた場合はここはよく確認しましょう!!(←私はここが原因で何日もかかってしまいましたので 笑)
でも二つ目のselectは以下の通り位置がズレてしまうので、調整を忘れないようにしましょう。
今回は二つ目は置いていて、一つ目で出来るレイアウト変更をメモします。
デフォルトで出来る装飾
よく注意して頂きたいのが、適用範囲はブラウザに依存するということです。
デフォルトのものを用いますので、当然と言えば当然ですね。
なので、効き方はそれぞれ違うことに注意して下さい。
では、いよいよ以下にデフォルトを崩さず効いたcssを記載します。
○font-size
-webkit系(chrome,safari) → 範囲限定で適用。
その他 → 適用可。
○font-family
-webkit系(chrome,safari) → user agent styleが適用される。
その他 → 適用可。
ただし、firefoxは文字が枠を超えてしまうことあり。
他にもあるかもしれませんが、私が試したものだとデザイン変わらないで弄れるたものはfont系だけでした。
間違っていたらご指摘頂ければ嬉しいです。
今日は予想以上に長くなったのでこの辺で。