HTML: Remover borda dos inputs quando clicado

Publicado em 02/06/2020
Atualizado em 09/08/2022

Neste artigo vamos aprender como remover a borda dos inputs quando eles são clicados, que é conhecido também como o evento de focus.

remover borda dos inputs capa

Fala programador(a), tudo bem? Bora aprender coisa nova!

Alguns navegadores ou até frameworks, como o Bootstrap, adicionam estilos adicionais que podem ser um problema

Então vamos primeiro, criar um formulário para ter um exemplo de código:

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

120 aulas
4 projetos
9h 45min

Criamos um form básico, com um input e uma textarea, para você ver que o código CSS que vamos inserir não tem limite de inputs

<!DOCTYPE html>
<html>
<head>
    <title>Como remover borda dos inputs</title>
</head>
<body>
    <h1>Preencha o formulário</h1>
    <form>
        <div>
            <input type="text" name="username" id="username" placeholder="Seu nome">
        </div>
        <div>
            <textarea name="msg" id="msg" placeholder="Sua mensagem"></textarea>
        </div>
        <div>
            <input type="submit" value="Enviar">
        </div>
    </form>
</body>
</html>

Agora vejamos a representação no browser:

removendo borda de input ex1

Veja que aquela borda laranja, pode variar entre navegadores, é um estilo automaticamente adicionado

Então é exatamente isso que vamos remover, e é preciso a seguinte regra:

div {
    margin: 20px;
}
textarea:focus, input:focus {
    box-shadow: 0 0 0 0;
    outline: 0;
}

A margin serve apenas para descolar as divs, não é necessária

A grande diferença será feita pelo box-shadow, que é a ‘sombra’ da div

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

E também removendo o outline, tudo isso é claro feito no evento de focus com o seletor especial :focus

Veja o resultado:

removendo borda de input ex2

E assim conseguimos remover borda dos inputs, que está inserida no evento de focus, legal né? 😀

Conclusão

Neste artigo prendemos a retirar a borda dos inputs, que são originadas quando clicamos em algum deles, ou seja, ativamos o :focus

Isso é feito retirando a box-shadow do elemento e também setando a propriedade outline para 0

Aí teremos um input sem efeitos adicionais, ao clicarmos nele

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Escrito por | Matheus Battisti

Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Canal no YouTube LinkedIn