CSS HTML

HTML: Remover borda dos inputs quando clicado

2 de junho de 2020

HTML: Remover borda dos inputs quando clicado

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:

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

0
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x