CODEWITHSUNDEEP
htmlcssfirefox
Matheno
Matheno

Reputation: 4142

Firefox :before ignores positions

I have this input with some content defined in the :before tag. In IE and Chrome, it works perfectly, but Firefox makes a mess of it.

The content should be visible in the input tag, but in Firefox the content is visible in the input-group-addon.

HTML:

<div class="col-sm-6">
  <div class="input-group">
     <div class="iban">
        <input type="text" name="iban" class="form-control text-uppercase">
     </div>
    
     <div class="input-group-addon">
        <span class="glyphicon"></span>
     </div>
  </div>
</div>

CSS:

.iban:before {
  content: 'CH';
  color: #999;
  position: absolute;
  padding-left: 7px;
  padding-top: 7px;
  z-index: 1000;
}
.iban > input {
  padding-left: 29px;
}

I reproduced it in a fiddle and I'm hoping someone faced this issue before and can help me out.

https://jsfiddle.net/9wme1roo/3/

Upvotes: 0

Views: 57

Answers (1)

Paulie_D
Paulie_D

Reputation: 115061

You haven't given the pseudo element any position values.

.iban:before {
  content: 'CH';
  left: 0; /* add this */
  color: #999;
  position:absolute;
  padding-left:7px;
  padding-top:7px;
  z-index:1000;
}

JSFiddle Demo

Upvotes: 3

Related Questions