文件上傳css

Question

我很難找出哪個css規則搞亂了文件上傳表單元素，因爲它與其他表單元素不完全對齊。

http://jsfiddle.net/emRr2/

Answer 1

有一些衝突的樣式。

這種風格是壓倒你的自定義元素的寬度和padding：

form .section > div { 
    [...] 
    padding: 0 10px 0 1%; 
    width: 75%; 
} 

添加DIV周圍的自定義字段將固定寬度：

<div class="section _100"> 
    <label for="file">Image</label> 
    <div> <!-- New DIV --> 
     <div class="customfile"> 
      <button class="customfile-button" aria-hidden="true">Browse</button> 
      <span class="customfile-feedback" aria-hidden="true">No file selected...</span> 
      <input type="file" style="left: -53.4167px; top: 24.1667px; margin: 0px;" name="file" value="" class="required customfile-input"> 
     </div> 
    </div> <!-- /New DIV --> 
</div> 

在我看來，你也應該刪除以下，這是抵消按鈕和增加高度：

.customfile-button { 
    margin-top:6px; 
}