日韩色视频人网站在线观看,91热国内精品永久免费观看

技術頻道 - html技術

輕松用CSS修改input file文件上傳控件樣式

作者:admin 時間:2021-8-9 12:7:38 瀏覽:

多數(shù)情況下，我們都不想用input file文件上傳控件的默認樣式，因為那樣的按鈕顯得太呆板了，也與網(wǎng)頁（UI）整體設計格格不入。其實，我們可以很輕松的使用很少的代碼，就能改變上傳控件的默認樣式。

input file文件上傳控件的默認樣式是這樣的。

通過簡單代碼，可把控件樣式改為這樣（按鈕、文字顏色、大小均可修改）。

這樣的按鈕樣式，是不是比默認的更有設計感了？它可以根據(jù)網(wǎng)頁（UI）的整體設計而改變其顏色及大小等樣式，使之與版面完美搭配。

實現(xiàn)方法介紹

首先是設置了 opacity: 0;使得 input 變得不可見了。

.inputFile{
    opacity: 0;
}
<input class="inputFile" id="inputFile" type="file" />

然后做一個模仿的“選擇文件”的按鈕。

.upload{
    width: 70px;
    padding: 4px 10px;
    line-height:25px;
    position: relative;
    border: 1px solid #999;
    text-decoration: none;
    color: #333;
    background-color:#FFF2B8;
}
.inputFile{
    opacity: 0;
}
<div href="javascript:;" class="upload">選擇文件
    <input class="inputFile" id="inputFile" type="file" />
</div>

這里的設計關鍵是，要將這兩個元素“疊加”在一起，所以要用上position這個屬性。

.inputFile{
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 0;
    opacity: 0;
}

還要添加一個顯示上傳文件名的div，這里需要用到一條JavaScript語句來賦值。

.fileInfo{
  float:left;
  position:relative;
  margin-left: 100px;
  margin-top:-30px;
}

<div class="container">
  <div href="javascript:;" class="upload">選擇文件
    <input class="inputFile" id="inputFile" type="file" onchange="javascript:{document.getElementById('fileInfo').innerHTML = document.getElementById('inputFile').value}" />
  </div>
  <div id="fileInfo" class="fileInfo"></div>
</div>

完整HTML代碼

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Css FIle Upload</title>
  
<style>

* {
  margin: 0;
  padding: 0;
  font-family: 微軟雅黑;

}

body {
  padding: 55px 25px;
}

.container{
   width:auto;
}

.upload{
    width: 70px;
    padding: 4px 10px;
line-height:25px;
    position: relative;
    border: 1px solid #999;
    text-decoration: none;
    color: #333;
background-color:#FFF2B8;
}
.inputFile{
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 0;
    opacity: 0;
}

.fileInfo{
    float:left;
    position:relative;
    margin-left: 100px;
    margin-top:-30px;
}

</style>

</head>

<body>
<div class="container">
  <div href="javascript:;" class="upload">選擇文件
    <input class="inputFile" id="inputFile" type="file" onchange="javascript:{document.getElementById('fileInfo').innerHTML = document.getElementById('inputFile').value}" />
  </div>
  <div id="fileInfo" class="fileInfo"></div>
</div>
</body>

</html>