css筆記——css 實現自定義按鈕

 

css實現自定義按鈕的樣式實際上很早就有了，只是會用的人不是很多，里面涉及到了最基礎的css寫法，在火狐中按鈕還是會顯示出來，這時需要將i標簽的背景設置為白色，同時z-index設置比input高一些，這樣才可以把按鈕蓋住，同時注意：background-color放在background后才起作用

/*自定義按鈕 */
.invoice-class-type{
	position:relative;
	display:inline-block;
	width:120px;
	height:30px;
	line-height:30px;
	text-align: center;
}
.invoice-class-type>input[type="radio"]{
	position:absolute;
	display:block;
    height:1px;
    widht:1px;
    left:0;
    top:0;   
}
.invoice-class-type>input[type="radio"]+i{
    display:block;
    position:absolute;
    left:0;
    top:0;
    z-index:10;
    line-height:30px;
    width:120px;
    height:30px;
    border:1px solid #888; 
    border-radius:2px; 
    cursor:pointer;
    background-color:#fff;
}
.invoice-class-type>input[type="radio"]:checked+i{
	border-color:#f30026; 		
	background:url(../images/modify-img/red_right.png) no-repeat right bottom;
	background-color:#fff;
}
/*結束 自定義按鈕*/

　　

　　

效果圖：

 

又例如：單選按鈕時只需要注意name屬性就行

/*checkbox*/
.s-checkbox{
    position:relative;
    display: inline-block;
}
.shopping_table_check1{
	position:relative;
}
.shopping_table_check1>span:before{
	margin-top:20px;
}
input[type="radio"].custom-checkbox,
input[type="checkbox"].custom-checkbox{
        position: absolute;
        z-index: -100;
        height: 1px;
        width: 1px;
        top:0;
        left:0;
    }
input[type="radio"].custom-checkbox+span:before,
input[type="checkbox"].custom-checkbox+span:before{
    display: inline-block;
    content: "\a0";
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-weight:800;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    border:1px solid #f30026;
    background-color:#fff; 
    color:#fff;     
}
input[type="radio"].custom-checkbox:checked+span:before,
input[type="checkbox"].custom-checkbox:checked+span:before{
    box-shadow:none;
    background-color:#f30026;
    content: "√";
}
/*結束  checkbox*/

 

效果圖如下：

　　

　結合css3寫炫酷按鈕

   CSS  

.animate-checkbox{
            position: relative;
            display: inline-block;
            width:60px;
            height:30px;
            border-radius: 15px;
            background-color:#fff;
            box-shadow: 1px 0 3px #333; 
            margin-top: 30px;
            cursor: pointer;
        }
        .animate-checkbox input{
            position: absolute;
            top:0;
            left:0;
            height:1px;
            width:1px;
            z-index: 1;
        }
        .animate-checkbox i{
            position: absolute;
            left:0;
            top:0;
            background-color: #428bca;
            width:30px;
            height: 30px;
            border-radius: 15px;
            z-index: 2;
            transition: width linear .2s;
        }
        .animate-checkbox i:before{
            display: block;
            position: absolute;
            content:" ";
            left:0;
            top:0;
            width:30px;
            height: 30px;
            border-radius: 100%;
            background-color:#f30026;
            transition: left linear .2s; 
        }
        .animate-checkbox input[type="checkbox"]:checked+i{
            width:60px;
            transition: width linear .2s;
        }
        .animate-checkbox input[type="checkbox"]:checked+i:before{
            left:30px;
            transition: left linear .2s;
        }

   DOM  結果

<label class="animate-checkbox">
     <input type="checkbox" name="">
     <i></i>
</label>

   效果圖

   沒選中

   

   選中