HTML/CSS form styles

Question

I'm trying to make a file sharing website but having trouble styling the upload forms I have as my design is quite advanced instead of setting the indivdual styles i'm trying to get set the design as a background image.

This is my design - http://icap.me/i/s5YIbheY3g.png

This is it currently effort - http://icap.me/i/ODuzJOQMhS.png

So far I set the style of the upload button by using the following code -

form input[type=submit] {
background : url("../img/upload.png") no-repeat center center;
width : 115px;
height :52px;
border : none;
color : transparent;
font-size : 0

}

do you know how I could use an image to style my other form buttons here is the html -

            <form action="upload_file.php" method="post"enctype="multipart/form-data">
        <input type="file" name="file" id="file" />
        <br />
        <input type="submit" name="submit" value="Submit" />
        <input type="checkbox" name="vehicle" value="Bike">I agree to the terms and conditions<br>
        </form>

Answer 1

Styling some form elements suck, and unfortunately, the file element is one of those elements. This is because the browser actually derives the control itself from the operating system (which means you have absolutely no control over how it looks). What this means for you is that in order to style it, you will need JavaScript and some CSS hackary.

Quirksmode has a great step by step for doing it, at least to get you started.

The basics of which, though, are:

1. Style your normal file input with position: relative .
2. Add a new plain old text input and position it on top of the file input.
3. Style the text input to look like the file input
4. Drop the file input's opacity to 0, so that it's invisible, but still clickable (this is key, because you're still actually using the file input)
5. Use JavaScript to put the filename into the text input

This one's kind of primitive and not very standards-compliant (extra elements and all that). If you're already using a JavaScript library (jQuery, MooTools, etc), you may be able to find a plugin that will handle the control itself, and you just add styling to that. The advantage to this method is that you won't necessarily need to add extra elements yourself (so you don't have a stray input field lying around), and the JavaScript (ideally) picks up the presence of your file input(s) and "fixes" them accordingly.

Answer 2

For styling browse button you need to take help of css-javascript duo or something like twitter bootstrap which just works out of the box 1 .. Also, check this post and this article

As a personal view, i feel that form elements like browse button and drop-down menus shouldn't be tweaked much..giving out two benefits..one, faster developments..and two, cross-browser symmetry..