Выбрать страницу

Здравствуйте. На днях столкнулся с задачей, суть которой была выровнять текст внутри select по центру. На первый взгляд подумал, что тут нет ничего страшного, просто можно прописать text-align: center  и будет счастье. Но всё оказалось не так просто. И простими стилями выровнять по центру кроссбраузерно не получиться.

Немного погугив и понял, что подходящего способа мне не найти, решил сделать свой велосипед, который в итоге показал себя очень неплохо. (по крайний мере в моем случае).

Итак, сначала покажу как это реализовать, а потом скажу почему именно этот способ я выбрал.

Структура HTML:

 

И немного jQuery:

 

Суть в том, что мы просто копируем текст выбранного пункта, и в переносим в подходящую нам оболочку, в которой мы сможем выровнять текст как нам будет нужно. В данном случае это span с классом selected-inf. И чтобы нам не мешал старый select, мы его делаем прозрачным. (Полностью убирать select не нужно, он нам нужен, мы будем нажимать на него).

Почему именно такой способ? Такой метод позволяет сохранить нативное использования на смартфонах и планшетах, что очень удобно. Если Вам это не нужно, то можно подключить плагин select 2

Спасибо за внимание.

P.S. Приношу извинения за то что не дописал стили, если честно было немного лень =)