-1

I've a hidden fileupload input and :before pseudo element. I'm trying to hide the input and open it by clicking the pseudo element.

But currently it's not when when i click the :before. How can i fix it?

This is my HTML:

<div class="icon-buttonimage">
    <input name="my_image[]" id="my_file" size="27" type="file" class="inputImage" title="Upload images" multiple="multiple" />
</div>

And CSS:

.icon-buttonimage:before {
    content:'\e800';
    font-size: 20px;
    margin-top: 16px;
    margin-left: 9px !important;
}

Also see my JSFiddle

T J
  • 42,762
  • 13
  • 83
  • 138
user3715916
  • 127
  • 7
  • 2
    Because you are clicking "before" that item. You need to click on the item. – Tuğrul Jul 12 '14 at 13:26
  • 1
    possible duplicate of [CSS :after pseudo element on INPUT field](http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field) – GreyRoofPigeon Jul 12 '14 at 13:26
  • @Tuğrul the actual issue is that he isn't clicking before the *item*. he's clicking something else.... – T J Jul 12 '14 at 15:56
  • @LinkinTED as you can see from [this answer](http://stackoverflow.com/a/14019758/2333214) (*more like a comment*) for the question you mentioned, pseudo elements work for some inputs in some browsers. It's not exactly a duplicate of that question... – T J Jul 12 '14 at 16:44

1 Answers1

1

It's not working because you've specified ::before for the <div> containing the input. So clicking it won't trigger a click on the input.

Also applying opacity:0 for the input won't work because it'll hide the pseudo elements as well.

You can do the following on webkit browsers (tested in chorme and opera)

  • You can trigger the click by specifying ::before for the <input>

  • You can hide the input by setting height and width to 0 and display the ::before alone by absolutely positioning it relative to the container div.

    div{
 position:relative;
}
input::before{
 content:'\e800';
 display:block;
 position:absolute;
 /*Other styles*/
}
input {
 width: 0px;
 height: 0px;
 outline:none; /*for hiding the selection around it once clicked*/
}

Updated Fiddle

Side note: :before is css2 syntax, from css3 onwards it's ::before

T J
  • 42,762
  • 13
  • 83
  • 138