Некоторые браузеры через чур стараются угодить пользователям, забывая о том, что некоторые пользователи считают, что браузер – это низкоуровневый терминал. В частности, разработчики Firefox позаботились о людях, с ограниченными возможностями (не имеющие возможность пользоваться мышью), и сделали выделение ссылки пунктирной линией, дабы показать, что эта ссылка активна. О том как убрать это выделение я расскажу в следующий раз. А пока… А пока вернемся, как говориться, к нашим баранам, а вернее к теме поста. Те, кто хоть раз пользовался браузером Safari замечали, что при нажатии на поле ввода оно(поле ввода) обрамляется рамкой ~ 4-5 пикселя. Необходимость этого не ясна, но смею предположить, что это сделано для тех же целей, что и господа из Mozilla сделали в Firefox. В общем, рассуждать можно сколько угодно, но факт остается фактом: с таким поведение браузера надо что-то делать. Потому что такое: не всем понравится Тк как же убрать эту окантовку? А очень просто. С помощью псевдоселектора :focus. Вот так:

input:focus { outline: none; }

Теперь, сохранив ваш css файл и, перезагрузив страницу, вы увидите что окантовки нет Одной строкой кода мы избавились от этой головной боли. А она, поверьте, есть особенно когда дизайнеры хотят изменять внешний вид полей ввода при помощи изображений