css - ファイルアップロードcss

Question

どの CSS ルールがファイル アップロード フォーム要素を台無しにしているかを特定するのに苦労しています。これは、他のフォーム要素と適切に調整されていないためです。

http://jsfiddle.net/emRr2/

Answer 1

いくつかの相反するスタイルがあります。

このスタイルは、カスタム要素の幅とパディングをオーバーライドしています:

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;
}