1

I want an image right before my text input. I'm trying :before with no luck or sign of the image!

http://jsfiddle.net/4U9uW/

<input type="text" class="form-control vrm-input" id="vrm" name="vrm" placeholder="" maxlength="10">

.vrm-input:before {
    background: url("http://www.byplug.com/oink.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    content: " ";
    height: 112px;
    left: -61px;
    position: absolute;
    top: 10px;
    width: 61px;
    z-index: 100;
}

I'm sure it's simple. Thanks!

James Wilson
  • 809
  • 3
  • 14
  • 25

2 Answers2

2

You can't use :before selector with <input> element, you should use outside <div> element,

Check this Demo jsFiddle

HTML

<div class="vrm-input">
    <input type="text" class="form-control" id="vrm" name="vrm" placeholder="" maxlength="10" />
</div>

CSS

.vrm-input:before {
    content: url("http://www.byplug.com/oink.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 112px;
    left: -10px;
    position: relative;
    top: 10px;
    width: 61px;
    z-index: 100;
}
Community
  • 1
  • 1
Jaykumar Patel
  • 26,836
  • 12
  • 74
  • 76
1

<input> elements have no 'content', they are not like divs,p,span: <div>here goes ::before content ::after</div>

Check https://stackoverflow.com/a/4574946/1666071 for more info.

Community
  • 1
  • 1
enapupe
  • 15,691
  • 3
  • 29
  • 45