樣式輸入類型=文件不按預期方式工作

Question

我正在爲表單類型創建一個css模板，並希望爲表單輸入提供一個圓角邊框。這適用於type = text，但不適用於type = file（用於文件上傳）。

我在做什麼錯？

.tempform input[type="text"] { 
    -moz-border-radius: 10px; 
} 

.tempform input[type="file"] { 
    -moz-border-radius: 10px; 
} 

<div class="tempform"> 
    <label for="textfield">Test Text Field</label> 
    <input type="text" id="textfield" name="textfield"></div> 
</div> 

div class="tempform"> 
    <label for="filefield">Test File Field</label> 
    <input type="file" name="filefield" id="filefield-0"> 
    <input type="file" name="filefield" id="filefield-1"> 
</div> 

Answer 1

不幸的是，除了改變寬度外，不可能設置文件上傳輸入的樣式。瀏覽器不允許任何其他更改。如果您想要設置文件上傳輸入的風格，則必須使用一種令人討厭的黑客方式，比如在圖像頂部放置幾乎不可見的文件上傳輸入（僅適用於某些瀏覽器）或JavaScript解決方案（如ajax-upload）。

Answer 2

根據the first Google search result，它是相當涉及。有關如何操作的信息，請參見quirksmode.org上的this article。