Style input type file with javascript on it

Question

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

The javascript has no effect on styling the button.

Barmar
– Barmar

2013-11-12 01:45:57 +00:00
Commented Nov 12, 2013 at 1:45 — Barmar
– Barmar, Commented Nov 12, 2013 at 1:45

Community · Accepted Answer · 2017-05-23 11:50:08Z

1

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.

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Nov 12, 2013 at 1:49

DACrosby

11.5k3 gold badges42 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Moncho Chavez · Accepted Answer · 2013-11-12 01:58:51Z

0

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

answered Nov 12, 2013 at 1:58

Moncho Chavez

6942 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

Style input type file with javascript on it

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related