Miten poistaa tarkennusraja (ääriviivat) tekstin/syöttölaatikoiden ympäriltä? (Chrome)

Voiko joku selittää, miten poistaa oranssi tai sininen kehys (ääriviivat) tekstin/syöttöruutujen ympäriltä? Luulen, että se tapahtuu vain Chromessa osoittaakseen, että syöttölaatikko on aktiivinen. Tässä on syöttö-CSS, jota käytän:

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

1

party-ring
Muokattu kysymysT33 elokuu 2019 в 4:59
Ohjelmointi
google-chrome focus css input border
T11 elokuu 2010 в 1:49
23 näkymät
Ratkaisu

Tätä reunusta käytetään osoittamaan, että elementti on tarkennettu (eli voit kirjoittaa syötteen tai painaa painiketta Enterillä). Voit kuitenkin poistaa sen:

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

Käyttökelpoisuuden vuoksi voit kuitenkin lisätä jonkin muun tavan, jolla käyttäjät tietävät, mikä elementti on näppäimistön tarkennuksessa.

Chrome käyttää korostusta myös muihin elementteihin, kuten DIV'iin, joita käytetään modaaleina. Voit estää korostuksen näissä ja kaikissa muissakin elementeissä seuraavasti:

*:focus {
    outline: none;
}
Chuck Le Butt
Muokattu vastausta T11 tammikuu 2016 в 8:34
Kommentit (16)
 
input:focus {
    outline:none;
}

Tämä riittää. Oranssi ääriviiva ei näy enää.

hichris123
Muokattu vastausta T00 joulukuu 2015 в 12:31
Kommentit (3)

Olen löytänyt ratkaisun.
Käytin: outline:none; CSS:ssä ja se näyttää toimineen. Kiitos avusta joka tapauksessa :)

Kommentit (2)