File upload css

I'm 'having a hard time figuring out which css rule is messing up the file upload form element because it's not quite aligned properly with the other form elements.

http://jsfiddle.net/emRr2/

Answers


There are some conflicting styles.

This style is overriding the width and padding on your custom element:

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

Adding a DIV around the custom field will fix the width:

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

In my opinion, you should also remove the following, which is offsetting the button and increasing the height:

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

Need Your Help

Android number of exact downloads

java php android firefox-addon google-play

From what I know, you can't get the exact number of users which downloaded your app, unless you're connected to your Google plus account. Is that true? (I haven't yet got a google play (android mar...

Working with dropdown list & Validation in asp.net

asp.net validation drop-down-menu panel

I have got a dropdown list populated with products from a product table. I have a button named ADD Product, so when the user wants to add a new product instead of selecting product from the drop down

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.