如何用純css實作input[type=file]的樣式控制（程式碼範例）-css教學-PHP中文網

如何用純css實作input[type=file]的樣式控制（程式碼範例）

不言

發布： 2018-11-06 11:02:51

原創

4487 人瀏覽過

這篇文章要跟大家分享的內容是關於如何用純css實作input[type=file]的樣式控制（程式碼範例），有需要的朋友可以參考一下。

如果您搜尋有關如何進行完全外觀控制的常見問題的解決方案，則結果可能適合以下3個類別之一：

需要Javascript。

在主瀏覽器中不起作用。

其實並沒有提供完整的風格控制。

上述三個絕對適合我在網路上找到的每一個答案。但你可以用純CSS做到這一點。它需要一個包裝元素來掛鉤樣式（輸入本身是隱藏的，因為它的樣式是如此有限/限制）。語意上的概念可能想要把這個變成- 順便說一下，每個元素有多個標籤沒有錯的。我們來看看從下面這個範例

程式碼如下：

<!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中文網其他相關文章！