css input 樣式美化input上傳按鈕美化

第cssinput樣式美化，input上傳按鈕美化

我們?cè)谧鰅nput文本上傳的時(shí)候，html自帶的上傳按鈕比較丑，如何對(duì)其進(jìn)行美化呢？同理：inputcheckbox美化，inputradio美化是一個(gè)道理的，后面文章會(huì)總結(jié)。

1.思路

inputfile上傳按鈕的美化思路是，先把之前的按鈕透明度opacity設(shè)置為0,然后，外層用div包裹，就實(shí)現(xiàn)了美化功能。

代碼如下：

DOM結(jié)構(gòu)：

ahref=JavaScript:;>

CSS樣式1：

/*aupload*/

.a-upload{

padding:4px10px;

height:20px;

line-height:20px;

position:relative;

cursor:pointer;

color:#888;

background:#fafafa;

border:1pxsolid#ddd;

border-radius:4px;

overflow:hidden;

display:inline-block;

*display:inline;

*zoom:1

.a-uploadinput{

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

}

樣式2：

.file{

position:relative;

display:inline-block;

background:#D0EEFF;

border:1pxsolid#99D3F5;

border-radius:4px;

padding:4px12px;

overflow:hidden;

color:#1E88C7;

text-decoration:none;

text-indent:0;

line-height:20px;

.fileinput{

position:absolute;

font-size:100px;

right:0;

top:0;

opacity:0;

.file:hover{

background:#AADFFD;

border-color:#78C3F3;

color:#004974;

text-decoration:none;

}

修改后如下：

樣式二：

備注：對(duì)于HTML5之input:file，還可以控制上傳的類型的，但是這個(gè)是html5的，低版本瀏覽器不支持

2.美化后顯示樣式名

上面美化，把默認(rèn)顯示的文件名也給隱藏掉了，那么如何顯示文件名稱呢？沒(méi)關(guān)系，我們可以用jquery來(lái)獲取文件的文件名。

我們可以寫(xiě)個(gè)change事件

$(.a-upload).on(change,input[type=file],function(){

varfilePath=$(this).val();

if(filePath.indexOf(jpg)!=-1||filePath.indexOf(png)!=-1){

$(.fileerrorTip).html().hide();

vararr=filePath.split(\

varfileName=arr[arr.length-1];

$(.showFileName).html(fileName);

}else{

$(.showFil