Hvordan fjerner jeg fokusrammen (omrisset) rundt tekst-/inntastingsbokser? (Chrome)

Kan noen forklare hvordan man fjerner den oransje eller blå rammen (omrisset) rundt tekst-/inndatabokser? Jeg tror det bare skjer på Chrome for å vise at inndataboksen er aktiv. Her er inngangs-CSS-en jeg bruker:

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

party-ring
Redigerte spørsmål 1. august 2019 в 4:59
Programmering
google-chrome focus css input border
3. august 2010 в 1:49
11 visninger
Løsning

Denne rammen brukes til å vise at elementet er fokusert (dvs. at du kan skrive inn inndata eller trykke på knappen med Enter). Du kan imidlertid fjerne den:

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

Det kan være lurt å legge til en annen måte for brukerne å vite hvilket element som har tastaturfokus, av hensyn til brukervennligheten.

Chrome vil også bruke utheving på andre elementer, for eksempel DIV-er som brukes som modaler. For å forhindre utheving på disse og alle andre elementer også, kan du gjøre:

*:focus {
    outline: none;
}
Chuck Le Butt
Redigert svar 5. januar 2016 в 8:34
Kommentarer (16)
 
input:focus {
    outline:none;
}

Dette holder. Det oransje omrisset vises ikke lenger.

hichris123
Redigert svar 14. desember 2015 в 12:31
Kommentarer (3)

Jeg har funnet løsningen.
Jeg brukte: outline:none; i CSS og det ser ut til å ha fungert. Takk for hjelpen uansett :)

Kommentarer (2)