[Dúvida] Não entendi o que é o outline | SASS: CSS sintaticamente espetacular

Solucionado (ver solução)

Solucionado
(ver solução)

1
resposta

Referente ao curso SASS: CSS sintaticamente espetacular, no capítulo Input, Footer e SASS e atividade Input

por Pedro Ernesto Silva da Cunha

| 117.6k xp | 120 posts

Não entendi qual a diferença que o outline: none gerou naquela última parte do código.

    .input{
        margin: 0 auto;
        width: 575px;
        border-radius: 20px;
        border: 4px solid white;
        background: white;
        input{
            border-radius: 20px;
            height: 40px;
            border: none;
            width: 540px;
            outline: none;
            text-align: center;
            font-size: 26px;
        }
        &:hover, &:focus-within{
            box-shadow: 1px 1px 8px 1px $cor-secundaria;
            outline: none;
        }
    }

1 resposta

solução!

por Lorena Garcia

| 6856.5k xp | 9957 posts

Alura Scuba Team Monitora

26/10/2023

Oi Pedro, tudo bem?

Essa propriedade é utilizada para remover a linha de contorno que aparece ao redor de um elemento quando ele está em foco.

No seu código, essa propriedade está sendo aplicada no seletor input, dentro da classe .input. Isso significa que quando o campo de input está em foco (quando você clica nele), a linha de contorno não será exibida.

Essa linha de contorno é adicionada pelo navegador por padrão e pode variar de estilo dependendo do navegador. Ao utilizar outline: none;, você tem o controle total sobre o estilo do contorno do elemento.

Um abraço e bons estudos.