資訊專欄INFORMATION COLUMN
摘要：思路美化思路是，先把之前的按鈕透明度設(shè)置為然后，外層用包裹，就實(shí)現(xiàn)了美化功能。上傳按鈕美化代碼如下樣式一樣式二點(diǎn)擊這里上傳文件選擇文件結(jié)果樣式一樣式二美化代碼如下背景圖片樣式結(jié)果美化代碼如下背景圖片樣式結(jié)果
思路：
美化思路是，先把之前的按鈕透明度opacity設(shè)置為0,然后，外層用div包裹，就實(shí)現(xiàn)了美化功能。
input[type=file]上傳按鈕美化代碼如下：
樣式一：
/*a upload */
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ffffd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
樣式二：
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
html:
點(diǎn)擊這里上傳文件 選擇文件
結(jié)果：
樣式一：
樣式二：
radio美化代碼如下：
背景圖片：
樣式：
.pay_list_c1 {
width: 24px;
height: 18px;
float: left;
cursor: pointer;
text-align: center;
margin-right: 10px;
background-image: url(images/inputradio.png);
background-repeat: no-repeat;
background-position: -26px 0;
}
.radioclass {
width:100%;
height:100%;
opacity: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.on {
background-position: 0 0;
}
html:
JS:
$(".pay_list_c1").click(function(){
$(this).addClass("on").siblings().removeClass("on");
})
結(jié)果：
checkbox美化代碼如下：
背景圖片：
樣式：
.piaochecked {
width: 20px;
height: 20px;
float: left;
cursor: pointer;
margin-left: 10px;
text-align: center;
background-image: url(images/checkbox_01.png);
background-repeat: no-repeat;
background-position: 0 0;
}
.on_check {
background-position: 0 -21px;
}
.radioclass {
opacity: 0;
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
html:
JS:
$(".piaochecked").click(function(){
$(this).toggleClass( "on_check" );
})
結(jié)果：
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112461.html
摘要：現(xiàn)在前端頁(yè)面效果日益豐富，默認(rèn)的組件樣式顯然不能滿足設(shè)計(jì)需求。前段時(shí)間開發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改樣式的方法。它使用純編寫，沒有任何的文件。 現(xiàn)在前端頁(yè)面效果日益豐富，默認(rèn)的input組件樣式顯然不能滿足設(shè)計(jì)需求。前段時(shí)間開發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改radio、CheckBox樣式的方法。 原理：大致原理都是使用原生的checkbox或inp...
摘要：現(xiàn)在前端頁(yè)面效果日益豐富，默認(rèn)的組件樣式顯然不能滿足設(shè)計(jì)需求。前段時(shí)間開發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改樣式的方法。它使用純編寫，沒有任何的文件。 現(xiàn)在前端頁(yè)面效果日益豐富，默認(rèn)的input組件樣式顯然不能滿足設(shè)計(jì)需求。前段時(shí)間開發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改radio、CheckBox樣式的方法。 原理：大致原理都是使用原生的checkbox或inp...
摘要：樣式復(fù)選框和單選按鈕看起來(lái)更漂亮。在線源碼使用你需要引入或者文件到你的工程或者中。 magic-input CSS3樣式復(fù)選框和單選按鈕看起來(lái)更漂亮。只有一個(gè)input元素。在線demo源碼：https://github.com/jaywcjlove/magic-input 使用 $ npm install magic-input 你需要引入 dist/magic-input.css或...
閱讀 2099·2023-04-25 17:57
閱讀 1298·2021-11-24 09:39
閱讀 2496·2019-08-29 16:39
閱讀 3323·2019-08-29 13:44
閱讀 3140·2019-08-29 13:14
閱讀 2331·2019-08-26 11:36
閱讀 3826·2019-08-26 11:00
閱讀 955·2019-08-26 10:14
