Make note

筋トレとアジャイル(カイゼン)とエンジニアリングの記事を投稿する、ムキムキエンジニアを目指しているやつのブログです。

【css】どこまでselectをデフォルトの状態で装飾出来るか

納期に追われて時間が無かった為、久しぶりの投稿となります。

今回は、簡単なことでしたが、随分とハマってしまったselectの装飾をメモしたいと思います。

 

目的

デフォルト状態のデザインを弄らずに装飾を行いたい

 

先に結論から言うと、この「デフォルト状態」ってのミスリードを誘った原因です。こいつが厄介だったわけですね。

何を勘違いしてハマったかは今回のテーマにも関係していくので、順々に分かり易く伝えられたらと思います。

 

通常selectをレイアウトするには?

まず先に述べておきますが、通常デザインされていないselect(プルダウン)を用いることはあまりないと考えていいでしょう。

 

なのに何故デフォルトを装飾する必要があるのか?

 

それはデザイン資料が足りず、最低限のトンマナを揃えて表示しておく時など、特定の要望があった場合に限られると思います。

なので今回は特殊なケースとなりますが、覚えておいて損はないと思います。

 

話を戻して、まずは通常selectを装飾する簡単な例をメモ。

HTML

<span>
 <select>
  <option>テストボックス</option>
 </select>
</span>

CSS

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などの表示は行うことは前提で行きましょう。

ここを細かくさらうと一つの記事が書けてしまうので、そこはまた今度。

 

ちなみに上記の設定をするとこんな感じに表示されます。

 

f:id:dmzsecondly:20151026194700j:plain

 

そもそもデフォルト状態とは? 

デフォルトの見た目はブラウザ毎に異なりますが、大体はこんな見た目ではないでしょうか? 

f:id:dmzsecondly:20151026195850j:plain

ですが、このデフォルトデザイン、appearanceを用いなくても他のbackgroundやborderを変えるだけで簡単に変わってしまいます。

こんな感じで。

 

f:id:dmzsecondly:20151026200240j:plain

これってデフォルトだけどデフォルトじゃないような…。

線引が微妙な気がしますけど、もし「デフォルトで」と言われた場合はここはよく確認しましょう!!(←私はここが原因で何日もかかってしまいましたので 笑)

 

でも二つ目のselectは以下の通り位置がズレてしまうので、調整を忘れないようにしましょう。

 

f:id:dmzsecondly:20151026200608j:plain

今回は二つ目は置いていて、一つ目で出来るレイアウト変更をメモします。

 

デフォルトで出来る装飾

よく注意して頂きたいのが、適用範囲はブラウザに依存するということです。

デフォルトのものを用いますので、当然と言えば当然ですね。

 

なので、効き方はそれぞれ違うことに注意して下さい。

では、いよいよ以下にデフォルトを崩さず効いたcssを記載します。

 

○font-size

 -webkit系(chrome,safari) → 範囲限定で適用。 

 その他         → 適用可。

 

○font-family

 -webkit系(chrome,safari) → user agent styleが適用される。 

 その他         → 適用可。

               ただし、firefoxは文字が枠を超えてしまうことあり。

 

 

他にもあるかもしれませんが、私が試したものだとデザイン変わらないで弄れるたものはfont系だけでした。

間違っていたらご指摘頂ければ嬉しいです。

 

今日は予想以上に長くなったのでこの辺で。