如何用純css實作input[type=file]的樣式控制（程式碼範例）
- 不言原創
- 2018-11-06 11:02:514607瀏覽
這篇文章要跟大家分享的內容是關於如何用純css實作input[type=file]的樣式控制（程式碼範例），有需要的朋友可以參考一下。
如果您搜尋有關如何進行完全外觀控制的常見問題的解決方案，則結果可能適合以下3個類別之一：581453aff614c5fedef6a25b318d28f5
需要Javascript。
在主瀏覽器中不起作用。
其實並沒有提供完整的風格控制。
上述三個絕對適合我在網路上找到的每一個答案。但你可以用純CSS做到這一點。它需要一個包裝元素來掛鉤樣式（輸入本身是隱藏的，因為它的樣式是如此有限/限制）。語意上的概念可能想要把這個變成bfdf57554631c62e63917d588904f58a- 順便說一下，每個元素有多個標籤沒有錯的。我們來看看從下面這個範例
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.fileContainer {
overflow: hidden;
position: relative;
}
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
/* Example stylistic flourishes */
.fileContainer {
background: red;
border-radius: .5em;
float: left;
padding: .5em;
}
.fileContainer [type=file] {
cursor: pointer;
}
}
</style>
</head>
<body>
<label class="fileContainer">
点击这里实现文件上传!
<input type="file"/>
</label>
</body>
</html>以上是如何用純css實作input[type=file]的樣式控制（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn