フォーム　セレクト　css プチまとめ

デフォルトのドロップダウンで結構な場合必要ない。

フォントサイズを変えたりブラウザの初期設定を変える場合
セレクトの
バックグラウンドや
ボーダーなどを変えるとスタイルが効く
CSS3のappearance　noneと同じ？

問題はfirefoxの矢印がすごくださいやつになってしまうこと

この問題を解消するだけの為に
customSelect.jsを使う

<!--セレクトデザイン-->
<script src='/js/jquery.customSelect.js'></script>
 <script>
$(document).ready(function(){
	$('.searchform-input-wrapper select').customSelect();

});
</script>

/*ドロップダウンPC*//*＋クラス　カスタムセレクトjs用*/

.searchform-param select/*,.customSelect*/{
	border: 1px solid #ccc;
	padding: 5px;
	font-size: 13px;
	background: #fff;
	background-image: -webkit-linear-gradient(top, #ffffff 0%, #dfe0d9 100%);
	background-image: -moz-linear-gradient(top, #ffffff 0%, #dfe0d9 100%);
	background-image: linear-gradient(top, #ffffff 0%, #dfe0d9 100%);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;



 /* Webkit 
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#eee),
        to(#fff)
        );
     
/* Firefox 
    background: -moz-linear-gradient(
        top,
        #eee,
        #fff
        );
     
/* IE 
    filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ffeeeeee,endColorstr=#ffffffff);
    zoom: 1;
}

*/



}

/*カスタムセレクトjs用
.searchform-input-wrapper{
	position: relative;
}

.customSelect:after{
	display: block;
	position: absolute;
	top: 5px;
	right: 10px;
	content: "▼";
	font-size: 12px;
	color: #999
	}

*/

コメントアウトした部分で

ドロップダウン矢印はアフターで実行

正
ドロップダウンのセレクトに
レラティブをかけると
ドロップダウンできないから
その外にレラティブして
アフターをアブソリュートする。