CODEWITHSUNDEEP
javascripthtmlcss
Moncho Chavez
Moncho Chavez

Reputation: 694

Style input type file with javascript on it

Hi im doing the css integration of a design im not a pro in javvascript just understand the basics. anyway..

I found a input file, that i cant style i found some tutorials, but all of them show how to do it on a normal button , im afraid of causing an issue for maybe some browsers .. or some other issue..

the button im trying to style is

<input name="image1" type="file" class="imatienda" onChange="parent.window.location.hash = 'block';document.ajax_upload.submit();">

I found for example this, but as i said, this is working on a normal input file with no javascript already on it. :D

thanks

Upvotes: 0

Views: 111

Answers (2)

Moncho Chavez
Moncho Chavez

Reputation: 694

I solved using this great method :D http://jsfiddle.net/gabrieleromanato/mxq9R/

HTML

<form action="" method="post" enctype="multipart/form-data">
    <div class="upload">
        <input type="file" name="upload"/>
    </div>
</form>

CSS

div.upload {
    width: 157px;
    height: 57px;
    background: url(https://lh6.googleusercontent.com/-dqTIJRTqEAQ/UJaofTQm3hI/AAAAAAAABHo/w7ruR1SOIsA/s157/upload.png);
    overflow: hidden;
}

div.upload input {
    display: block !important;
    width: 157px !important;
    height: 57px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

Upvotes: 0

DACrosby
DACrosby

Reputation: 11450

Javascript attributes are largely irrelevant to CSS styling.

<input name="image1" type="text" onChange="parent.window.location.hash = 'block';document.ajax_upload.submit();">

input{
    padding:15px 25px;
    background:red;
    border:none;
}

input type=file is, however, a bit of an issue all around the board because they're just hard to style - not too much that can be done about it. Take a look here on SO for some more info, and here for another possible work around.

Upvotes: 1

Related Questions