Проблема с выделением текста в поле формы у Safari и Сhrome

Заметки - Фишки CSS

Возможно, кто-то из вас, дорогие читатели, когда-нибудь сталкивался со следующей проблемой: если при выделении текста в поле формы в браузерах Safari и Chrome мышка выходит за пределы поля, то выделение загадочным образом пропадает. Те, кому описание этого бага показалось слишком запутанным, могут посмотреть пример.

Путем долгих экспериментов было выяснено, в каких именно ситуациях поля формы ведут себя таким странным образом, хотя другой вопрос «почему» так и остался без ответа.

Итак, вот оно, откровение: данная странность возникает в том случае, если у любого родителя поля этой формы, включая даже тег body, стоит… что бы вы думали? text-align: center!

Соответственно, решение проблемы состоит в том, чтобы обернуть input ещё одним контейнером, у которого будет выставлен text-align: left.

Однако это ещё не всё

Если среди родителей поля есть хотя бы один элемент с display: inline-block, то данное решение тут же, и не менее загадочным образом, перестает работать.

Несколько резюмирующих примеров

Выделение будет пропадать

Copy Source | Copy HTML

В этом случае выделение пропадать не будет

Copy Source | Copy HTML

В этом случае выделение всё равно будет пропадать

Copy Source | Copy HTML

Cпасибо за внимание. Надеюсь, кому-то эти сведения окажутся полезными.