IE10 | Adding a Focus Class | Placeholder Padding Issue

[mrpatrickbrown77]

Hey all,

I’ve noticed a strange issue on Internet Explorer 10.

It happens when you add/ remove a focus class via JavaScript. The placeholder text is misaligned vertically.

This does not happen if you use a focus selector. Unfortunately I can’t use this approach.

Here is an example:

Edit fiddle - JSFiddle - Code Playground

JavaScript:

var input = document.querySelector('input');

input.addEventListener('click', function () {
    this.classList.add('inputFocus');
});

input.addEventListener('blur', function () {
    this.classList.remove('inputFocus');
});

CSS:

body {
    padding-top: 20px;
}

input {
    padding: 11px 11px 11px 44px;
}

.inputFocus {
    margin-top: -10px;
    padding: 21px 11px 21px 44px;
}

HTML:

 <input type="text" placeholder="Search..." />
```

Cheers!

[chrisofarabia]

Your jsfiddle link goes to a blank page rather than a working example. Could you let us know what it should be?

[mrpatrickbrown77]

Sorry. I forgot to save it.

There you go!

Cheers.