日: 2014年8月18日

フォーム　セレクト　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
	}

*/

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

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

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

チェックボックスcss ＆　:after説明

input[type="checkbox"] {
    border: 1px solid #aaaaaa;
    vertical-align: -8px;
    -webkit-appearance: none;
    position: relative;
    margin-right: 5px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-sizing: border-box;
    width: 26px;
    height: 26px;
    /*Other Browser*/
    background: #e2e2e2;
    /*For Old WebKit*/
    background: -webkit-gradient(
        linear, left top, left bottom,
        color-stop(0.00, #ffffff),
        color-stop(1.00, #e2e2e2)
    );
    /*For Modern Browser*/
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #e2e2e2 100%
    );
}

input[type="checkbox"]:checked {
    /*Other Browser*/
    background: #99cc00;
    /*For Old WebKit*/
    background: -webkit-gradient(
        linear, left top, left bottom,
        color-stop(0.00, #99cc00),
        color-stop(1.00, #87b400)
    );
    /*For Modern Browser*/
    background: linear-gradient(
        to bottom,
        #99cc00 0%,
        #87b400 100%
    );
    border: 1px solid #336600;
}

input[type="checkbox"]:checked:before {
    position: absolute;
    left: 1px;
    top: 16px;
    display: block;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    content: "";
    width: 10px;
    height: 4px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: right center;
}

input[type="checkbox"]:checked:after {
    display: block;
    position: absolute;
    left: 9px;
    top: 16px;
    content: "";
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    width: 16px;
    height: 4px;
    background: #ffffff;
    -webkit-transform: rotate(-53deg);
    -webkit-transform-origin: left center;
}
li {
  list-style: none;
}
li.sample1:before {
  content: "※";
  color: red;
}
li.sample2:after {
  content: "NEW";
  color: red;
  font-size: 80%;
  padding: 2px 5px;
  margin-left: 5px;
  border: solid 1px #ff0000;
}
<ul>
  <li>サンプル1</li>
  <li class="sample1">サンプル2</li>
  <li class="sample2">サンプル3</li>
</ul>

リスト１
※リスト２
リスト３new

contentプロパティが空の場合でも必ず記述して下さい。
contentプロパティは必要条件で、記述がないと動作しないので注意が必要です。

http://www.hp-stylelink.com/news/2013/11/20131113.php
参考