Блог

Главная - Вопросы по программированию - Как избавиться от синей внешней границы при нажатии на поле ввода формы?

Как избавиться от синей внешней границы при нажатии на поле ввода формы?

#html #forms #textfield

#HTML #формы #текстовое поле

Вопрос:

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

Я новичок, поэтому у меня нет такого опыта. Мой код:

 <input type="text" name="search" size="40" value="Job Title e.g. Assistant Manager"  
style="background-color:white; border: 
solid 1px #6E6E6E; height: 31px; font-size:16px; 
vertical-align:0px;color:#bbb" 
onfocus="if(this.value == 'Job Title e.g. Assistant Manager'){this.value = 
'';this.style.color='#000'}" />

Спасибо!

Джеймс

Ответ №1:

Этот фрагмент CSS должен работать во всех основных браузерах:

     input:focus {
        outline:none;
    }

Если этого не произойдет, попробуйте добавить !important директиву:

     input:focus {
        outline:none !important;
    }

Комментарии:

1. Если какой-либо div доступен для просмотра, это тоже div:focus { outline: none; } поможет избавиться от синего контура.

Ответ №2:

Вы просто добавляете:

 <style type="text/css">
#hello:focus
{
  outline:none;
}    
</style>



<input type="text" id="hello"></input>

приветствия!

Ответ №3:

Вы можете использовать приведенное ниже свойство стиля для элемента, чтобы избежать синей границы.

 style="box-shadow: none;"

Например:
Здесь я использовал в своей кнопке

 <button type="button" style="box-shadow: none;">Button</button>

Ответ №4:

Хотя это напрямую не связано, я оставляю здесь заметку, поскольку эта страница SO — это то, что появилось в моем поиске. Ответы, перечисленные здесь, также работают для видео html5. В моем случае под видео в Chrome была синяя граница.

Для полноты картины:

 video 
{
  outline:none;
}

Ответ №5:

Если вам нужно простое решение и вы хотите удалить синюю границу из всего html, используйте

 *:focus {outline:none !important}