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

Cookie via AJAX

php ajax cookies setcookie

I'm trying to set a cookie via AJAX directly with PHP. The code below sets the cookie just fine in Firefox, Opera and Safari, but not in Chrome and IE8.

iOS - How to selectively delete files older than a month in Documents Directory

iphone objective-c ios iphone-4

I am downloading images to my app which after a few weeks the user will not care about. I download them to the app so they will not have to be downloaded every launch. The problem is I do not want ...