Styling CSS error

Question

I am trying to style an input button but a jQuery function seems to interfere.

HTML code:

<form action="../include/upload-local-file.php" method="post" enctype="multipart/form-data" id="imageuploadform">
<div class="uploaded" style="display:inline-block"></div>
<div class="formupload" style="display: inline-block; position: relative; top: -10px;"><input name="imagefile" id="file" type="file" class="uploadinput" /></div>

jQuery code:

function() {
$('#imageuploadform').submit();
}

My CSS code:

#imageuploadform input[type="file"] {
background : url("../images/selecteaza.png") no-repeat center center;
width: 186px;
height:40px;
border: none;
color: transparent;
font-size: 0 !important;
}

Unfortunately, I still have part of the original button visibile, both in FF and Chrome:

https://i.stack.imgur.com/QWSQs.png

Any ideas?

Why do you say that jQuery affects styling? Also, try changing border to `border: 0 none;`. — lolbas, Jan 29 '18 at 14:20
I changed the border setting, no change. I said the jQuery code affects the styling because the CSS code would work if the input button was inside the HTML code. — Alex, Jan 29 '18 at 14:21
Not a duplicate. I read most threads on this subject, but none of them had the input button done by jQuery. That's where I'm stuck. — Alex, Jan 29 '18 at 14:24
What do you mean by _"... had the input button done by jQuery"_? — Turnip, Jan 29 '18 at 14:26
I mean I don't have a simple code like: . I have $('#imageuploadform').submit(); — Alex, Jan 29 '18 at 14:27
Your js is invalid and will likely throw an error so I doubt that is the cause of your css issues (unless you style the file input using a js plugin) — Pete, Jan 29 '18 at 14:27
@Alex that javascript has absolutely nothing to do with how your input is styled — Turnip, Jan 29 '18 at 14:29
The problem is that you are trying to style the input directly. As others have stated, this is not the way to do it. Look at the duplicate question. — Turnip, Jan 29 '18 at 14:31
see my minmal example below and alter `div class="formupload` to a `label` ... than add the css from the example and you're done — denns, Jan 29 '18 at 14:33
Thank you, guys, it totally worked. I changed the DIV to a LABEL like denns said, then applied the tutorial that Turnip recommended! Awesome! — Alex, Jan 29 '18 at 14:40

denns · Answer 1 · 2018-01-29T14:29:12.023

1

You normally hide the original button with css and wrap it with a label.

https://tympanus.net/Tutorials/CustomFileInputs/

The label always triggers the original button even if not visible.

https://codepen.io/denns/pen/zRYZga here a minimal example

input[type="file"]{
  height: 0;
  width: 0;
  opacity: 0;
  overflow: hidden;
}


label {
  // whatever
  background: gray;
  padding: 5px;
  border: 1px dashed hotpink;
}

edited Jan 29 '18 at 14:29

answered Jan 29 '18 at 14:22

denns

1,105
1
11
24

Thanks, I read a few tutorials but I only know CSS, I don't know how to add the CSS code to the input in the jQuery function. – Alex Jan 29 '18 at 14:23
what do you mean by "add css in jquery function"? you can do something like: `$('#mybutton').css({color: 'red'}).submit()` – denns Jan 29 '18 at 14:25
why is this downvoted??? – denns Jan 29 '18 at 14:34

Styling CSS error

1 Answers1