?

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>

? ?效果圖

? ?沒選中

? ?

? ?選中　　

　　

　

轉載于:https://www.cnblogs.com/MonaSong/p/5818084.html

總結

以上是生活随笔為你收集整理的css笔记——css 实现自定义按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。