Sensei

Не псевдокласс, а псевдоэлемент)
Псевдоэлементы вставляются внутрь элемента. Перед или после контента, соответственно.
Но input -- пустой элемент. У него нет контента, и вставлять псевдоэлементы просто некуда.

Куча лишних оформительских элементов в разметке и, как следствие, плохое именование.
Вот, не поленился) https://jsfiddle.net/0n31Lx4b/

Скорее всего, fontsquirrel вырезает кириллицу.
В настройках можно указать языки https://yadi.sk/i/1CxDqophpPyGh

Вы не передали объект конструктору, а стало быть options === undefined.
Попытка чтения свойства у undefined приводит к ошибке, так как undefined не объект и никаких свойств иметь не может.
 
Чтобы ошибки не было, можно:
- передать в конструктор пустой объект, или сделать как показали выше.
- совершать присваивание с помощью try-catch
- использовать jQuery.extend() или свою функцию
- использовать возможности es6 — Object.assign() или параметры по умолчанию
 
Нормальным путем будет применение одного из последних двух пунктов)

Есть событие ended
https://jsfiddle.net/exacjuvc/

Вот такая замечательная особенность флекса)
http://www.w3.org/TR/css-flexbox/#main-alignment

Можно замыкания использовать.
Вот, соорудил пример http://jsfiddle.net/32531kf3/

Я так понимаю, проблема не в высоте, а в выравнивании.
Инпуты по умолчанию «display: inline;» и выравнены по базовой линии.
Так как высота строки у поля меньше, чем у кнопки происходит сдвиг.
 
Задайте инпутам «vertical-align: top;».

$('body').on('click', function(e) { if (!$(e.target).closest('.searchfield').length) { $('.search-bg').css('background-position', '0px 0px'); } });А вообще, можно было и без js обойтись
.search-input:focus + .search-bg { background-position: 0 0;}

http://jsfiddle.net/7sut76gy/

Пора уже «флекс» применять http://jsfiddle.net/umjpv4e1/
(для старья деградация до таблицы)

Тогда так http://jsfiddle.net/99a2t2az/1/
В ие8 работать не будет, если это критично)