CSS input убрать рамку при фокусе

Последнее обновление на 28.01.2023

Создаем для примера поле ввода текстовой информации input в html

<input type="text" name="Search" value="Search">

Далее в стиле фокуса input задаем для атрибутов border, outline и box-shadow (если имеется в стилях input) значение none.

input{
border: 1px solid orange;
box-shadow: 4px 4px 2px 1px orange;
}

input:focus{
  border: none;
  outline:none;
  box-shadow: none;
}

Пример работы input при фокусе или при нажатии рамка вокруг input убирается.

Пример как в input при фокусе (нажатие) убрать везде рамки и оставить рамку только снизу

 
input{ border: 1px solid orange; 
box-shadow: 4px 4px 2px 1px orange; 
} 

input:focus{ 
border-left:none;
border-right:none;
border-top:none;
border-bottom: 2px solid gray; 
outline:none; 
box-shadow: none; 
}