Como remover a borda do foco (contorno) em torno de caixas de texto/entrada? (cromado)

Alguém pode explicar como remover a borda laranja ou azul (contorno) ao redor das caixas de texto/input? Eu acho que só acontece no Chrome para mostrar que a caixa de entrada está ativa. Aqui's a entrada CSS I'm usando:

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
}

party-ring
Pergunta editada :em
Programação
google-chrome focus css input border
3º agosto 2010 в 1:49
22 vistas
Solução

Esta borda é usada para mostrar que o elemento está focado (ou seja, você pode digitar a entrada ou pressionar o botão com Enter). Você pode removê-lo, no entanto:

textarea:focus, input:focus{
    outline: none;
}

Você pode querer adicionar alguma outra forma para os usuários saberem qual elemento tem foco no teclado para a usabilidade.

O cromado também aplicará o destaque a outros elementos como DIV's usados como modais. Para evitar o destaque nesses e em todos os outros elementos também, você pode fazer:

*:focus {
    outline: none;
}
Chuck Le Butt
Resposta editada :em
Comentários (16)
 
input:focus {
    outline:none;
}

Isto serve. O esboço laranja ganhou'não aparece mais.

hichris123
Resposta editada :em
Comentários (3)

I'encontrei a solução.
Eu usei: "linha de costa: nenhuma;" no CSS e parece ter funcionado. Obrigado pela ajuda na mesma. :)

Comentários (2)