使用「檔案」類型設定輸入欄位的樣式
在 Web 開發領域，自訂輸入欄位的外觀通常是必要的。雖然傳統的輸入類型可能就足夠了，但設計文件選擇器等特定元素可能會帶來獨特的挑戰。
隱形文字方塊難題
其中一個挑戰是隱藏與檔案輸入欄位。增強使用者體驗通常需要純按鈕介面。要實現此目的，請考慮以下以CSS 為中心的方法：
CSS 實現：
以下程式碼片段示範如何在保持按鈕功能的同時偽裝文本框：
<code class="html"><html>
<style type="text/css">
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
div.fakefile input[type=button] {
cursor: pointer;
width: 148px;
}
div.fileinputs input.file {
position: relative;
text-align: right;
opacity: 0;
z-index: 2;
}
</style>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input type="button" value="Select file" />
</div>
</div>
</html></code>將「fakefile」元素放置在原始文字方塊上並將其輸入按鈕設為全寬，建立按鈕式檔案選擇器的外觀。同時，實際的文字方塊在視覺上被隱藏，不透明度為零。
以上是如何設定文件輸入欄位的樣式（如按鈕）：CSS 指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
