Kaikki painikkeeni ovat korostettuina, kun klikkaan niitä. Se on Chromessa.
Käytän Bootstrapia teemalla, mutta olen melko varma, että se ei ole: olen huomannut tämän aiemmin toisessa projektissa.
Se katoaa, jos käytän tunnistettasen sijaan
html css twitter-bootstrap
333
Sean Clark Hess 27. syyskuuta 2013 klo 18:23
12
Outline: 0; saattaa kiinnostaa sinua
–
Wiggler Jtag
27. syyskuuta 2013 klo 18:24
Lisätäänkö luokkaa napsautuksen jälkeen?
–
Korppi
27. syyskuuta 2013 klo 18:25
Oletko kokeillut -webkit-appearance:none -painiketta?
–
Danield
27. syyskuuta 2013 klo 18.30
3
Outline: 0 ei näytä auttavan, ei myöskään webkit-ulkonäkö
–
Sean Clark Hess
27. syyskuuta 2013 klo 18:34
5
Nyt on vuosi 2020 ja vihdoin tähän ongelmaan on virallinen ratkaisu:tarkennus-näkyvä. Katso vastauksenistackoverflow.com/a/60219624/413538
–
JamesWilson
14.2.2020 klo 22:39
33 vastausta
paras vastaus
Löysin tämän kysymykset ja vastaukset toiselta sivulta, ja painikkeen kohdistustyylin ohittaminen toimi minulle. Tämä ongelma saattaa olla macOS-kohtainen Chromen kanssa.
.btn:focus { outline: ei mitään; box-shadow: ei mitään;}Huomaa kuitenkin, että tällä on merkitystä saavutettavuuden kannalta, eikä sitä suositella, ennen kuin painikkeiden ja tulojen tarkennustila on hyvä. Alla olevien kommenttien mukaan on käyttäjiä, jotka eivät voi käyttää hiiriä.
395
Aditya Kresna Permana 28.4.2020 klo 11.17
53
Mietin myös sitä, mutta eikö ääriviivojen poistaminen aiheuta esteettömyysongelmia?
–
silvenon
14. lokakuuta 2014 klo 15.23
10
En usko, että meillä on muuta vaihtoehtoa. Voit myös lisätä valitsimen.btn:active:focuspoistaaksesi sen aktiivisesta tilasta.
–
silvenon
14. lokakuuta 2014 klo 15.37
68
Ääriviivojen poistaminen painikkeesta on ehdottomasti huono saavutettavuuden kannalta. Jotkut käyttäjät eivät voi hallita hiirtä ja heidän on voitava navigoida sivulla näppäimistön avulla. Ääriviivojen poistaminen tekee tästä erittäin vaikeaa. On luultavasti parempi estää painiketta tarkentamasta sitä napsauttaessa.
–
Murphy Randle
28. tammikuuta 2016 klo 00:30
3
Kun käytetään sisäänrakennettuja bootstrap-muuttujia, tämä voidaan saavuttaa asettamalla nämä kaksi muuttujaa arvoon: $btn-focus-width: 0; $btn-focus-box-shadow: ei;
–
luotijuna
14. toukokuuta 2019 klo 17:52
2
Tämän ei todellakaan pitäisi olla hyväksyttävä vastaus, koska se on täysin esteettömyysstandardien vastaista.
–
Ryan
21. maaliskuuta 2021 klo 18:32
Ymmärtääkseni painopiste siirtyy ensin tapahtuman jälkeenonMouseDown, joten puhelue.preventDefault()VonMouseDownvoi olla puhdas ratkaisu tarpeidesi mukaan. Tämä on varmasti kätevä ratkaisu, mutta se luonnollisesti säätelee hiiren napsautuskäyttäytymistä, mikä ei välttämättä ole yhteensopiva verkkoprojektisi kanssa.
Käytän tällä hetkellä tätä ratkaisua (projektin sisälläreagoi-bootstrap) enkä saa tarkennusta välkkymään tai painikkeita, jotka pitävät tarkennuksen napsautuksen jälkeen, mutta voin silti keskittyä välilehteen ja hahmontaa visuaalisesti saman painikkeen tarkennuksen.
75
pjs 2. kesäkuuta 2016 klo 01:50
3
Joo. ratkaisusi toimii. Kiitos neuvoista. TässäViuluratkaisuja varten. Mutta tämä edellyttää JavaScript-käsittelijän liittämistä jokaiseen painikkeeseen. Olisi hienoa, jos voisimme saavuttaa tämän vain CSS-ratkaisulla.
–
Galeel Bhasha
28. kesäkuuta 2016 klo 15.49
1
Luulen, että ihmiset odottavat, että kun elementtiä napsautetaan, painopiste on elementissä, ja tämä ratkaisu estää sen. Napsautan usein elementtiä ja siirryn sitten poispäin ennen kuin vapautan hiiren tarkentamaan sitä, jotta voin sitten navigoida sieltä.
–
Michael Tontchev
12. tammikuuta 2017 klo 00:00
12
Jokaiselle, joka katselee fragmenttia, tämän pitäisi toimia ja tallentaa onClick:onMouseDown={e => e.preventDefault()}
–
Adam K Dean
19. tammikuuta 2017 klo 14:33
1
Tämä estää välilyönti- ja askelpalauttimen painamisen painikkeessa. Ehkä täydellisempi ratkaisu on lisätä tämä takaisin seuraavasti:onKeyUp={(e) => {if (e.keyCode === 13 || e.keyCode === 32) handleClick()}.
–
jfbloom22
3. toukokuuta 2018 klo 23.00
Ei pitäisi kutsua e.preventDefault()-funktiota tapahtuman sisälläonKeyUp. Osoittautuu, että jos teet niin, painike pysyy tarkennettuna, kun painat välilyöntinäppäintä tai askelpalautinta ja sarkainnäppäintä tai napsautat mitä tahansa.
–
jfbloom22
3. toukokuuta 2018 klo 23.11
Minulla oli sama ongelma MacOS:ssa ja Chromessa, kun käytin painiketta siirtymätapahtuman käynnistämiseen. Jos joku lukee tätä, käyttää jo tapahtumakuuntelijaa, voit ratkaista asian soittamalla.hämärtää()tekojenne jälkeen.
Esimerkki:
nextQuestionButtonEl.click(function(){ if (onQuestionAnswered()) { currentQuestion++; changeQuestion(); } else { toggleNotification("invalidForm"); } this.blur();});Jos et vielä käytä tapahtumaseurainta, sen lisääminen vain tämän ongelman ratkaisemiseksi voi aiheuttaa tarpeettomia lisäkustannuksia, ja edellisten vastausten kaltainen tyyliratkaisu on parempi.
jospablos 27. helmikuuta 2016 klo 02:13
Haluat jotain tällaista:
.blur()-menetelmä poistaa kohdistuksen korostuksen oikein eikä sotke Bootstraps-tyylejä.
154
cshotton 16. syyskuuta 2014 klo 23:59
12
Tämä renderöi skeeman hetkeksi, mikä silti sotkee sen :/
–
silvenon
14. lokakuuta 2014 klo 15:30
3
En näe välkkymistä, jos kutsun fokustapahtumaa napsautustapahtuman sijaan.
–
Charles
25. toukokuuta 2015 klo 08:52
2
Se toimi hienosti! Tuleeko mahdollisia ongelmia, jos yritän liittää toisen click()-tapahtumakäsittelijän (eli koodin, joka suoritetaan, kun määritettyä painiketta napsautetaan) samaan painikkeeseen?
–
chasethesunnn
22. heinäkuuta 2015 klo 23:18
4
Jos joku ihmettelee, toimiiko tämä bootstrap v4:ssä, niin kyllä. Vastaus on voimassa vielä vuonna 2018, hurraa!
–
jreed
1. toukokuuta 2018 klo 10.11
4
Onko tämä hyväksyttävää saavutettavuuden kannalta suosituimpaan kysymykseen verrattuna?
–
CharlesM
26. marraskuuta 2018 klo 20.11
Jos käytät webkit-selainta (ja mahdollisesti webkit-toimittajan etuliitteen kanssa yhteensopivaa selainta), tämä ääriviiva kuuluu painikkeen pseudoluokkaan-webkit-focus-rengas. Ota vain selvääääriviivatpäälläei mitään:
*:-webkit-focus-reng { ääriviivat: ei mitään;}Chrome on sellainen webkit-selain, ja tämä vaikutus näkyy myös Linuxissa (ei vain macOS:ssä, vaikka joissakin Chrome-tyyleissäliittyvätvain macOS)
Nate Symer 4. huhtikuuta 2018 klo 17.33
Jos haluat poistaa ääriviivat päällähiiri alasmutta ei näppäimistöllä-välilehtija käytätVueJS, tässä on ratkaisu:
Tämä estää pohjimmiltaan keskittymisen napsautuksiin, mutta kaikki muu tapa keskittyä pysyy aktiivisena.
1
TetraDev 12. toukokuuta 2021 klo 21.31
Huomautus 1: Jokaisessa alla olevissa kolmessa vaihtoehdossa painikkeet toimivat samalla tavalla (ei tarkennusrengasta painettaessa), muttavalinta ja tietojen syöttäminen ovat hieman erilaisiaoletuskäyttäytymistä . Vain vaihtoehto 3 poistaa jatkuvasti tarkennusrenkaat painikkeiden, tulojen ja valintojen ympäriltä. Vertaa kaikkia lähestymistapoja ja varmista, että ymmärrät seuraukset.
Huomautus 2: CSS:n peräkkäisen luonteen vuoksi CSS-sääntöjen järjestys on tärkeä.
Huomautus 3: Kummalla tahansa lähestymistavallatarkennus-näkyväsaavutettavuusongelmia on edelleen. Nimittäin, että kunnes selaimet avaavat konfiguraation, jonka avulla käyttäjät voivat valita, milloin näkyvät tarkennusrenkaat näyttävät, fokus-näkyvyyttä tulisi pitää saavutettavuuden kannalta huonompana kuin koko ajan tarkennusrenkaita, mutta parempia kuin haitallinen lähestymistapa.:focus {outline:none}mainitaan muissa vastauksissa tähän kysymykseen. Katso lisätietoja tämän vastauksen alareunasta "Esteettömyyshuomautus" -osiosta.
VAIHTOEHTO 1: Käytä pseudoluokkaa:tarkennus-näkyvä
Voit käyttää pseudoluokkaa:tarkennus-näkyvä. poista ääriviivat ja tarkennusrenkaat painikkeista ja erilaisista elementeistä käyttäjille, jotka EIVÄT navigoi näppäimistöllä (eli kosketa tai napsauta).
Varoitus: vuodesta 2021 pseudoluokka
:tarkennus-näkyvä** tuettu laajasti nykyaikaisissa selaimissa, mutta ei toimi. kolmannen osapuolen selaimissa**. Jos tuki vanhemmille selaimille on tärkeää, lähin likiarvo on Javascript-polyfill alla olevasta vaihtoehdosta 2.
/** * Poista tarkennustyylit muussa kuin näppäimistössä. */:focus:not(:focus-visible) { ääriviivat: 0; box-shadow: none;}/** * Selaimien väliset tyylit tarkentamiseen * näppäimistöpohjaisen (esim. Tab) navigoinnin tai * .focus-visible -apuluokan avulla. */:focus,.focus-visible:focus:not(:focus-visible) { ääriviivat: 0; box-shadow: 0 0 0 .2rem #ffff, 0 0 0 .35rem #069;}Oletukset:
Pakota painopiste napsautukseen:
VAIHTOEHTO 2: Käytä polyfill.tarkennus-näkyvä
Tämä ratkaisu käyttää normaalia CSS-luokkaa yllä mainitun pseudoluokan sijaan ja sillä on laajempi selaintuki (vuonna 2021). Tätä varten sinun on lisättävä 1 tai 2 Javascript-komentosarjaa HTML-koodiisi. yksi vartenVirallinen polyfill näkyy tarkennuksessa, ja toinen vanhemmille selaimille, jotka eivätclassList-tuki.
Huomautus. Näyttää siltä, että Chromessa polyfill käsittelee valintoja eri tavalla kuin oma pseudoluokkansa:tarkennus-näkyvä.
/** * Selaimen välinen tarkennusrengas tarkkaan tarkennukseen * näppäimistöpohjaisen (esim. Tab) navigoinnin tai * .focus-visible -apuluokan avulla. */:focus { ääriviivat: 0; box-shadow: 0 0 0 .2rem #ffff, 0 0 0 .35rem #069;}/** * Poista tarkennusrengas ei-selkeissä tapauksissa. */:focus:not(.focus-visible) { ääriviivat: 0; box-shadow: ei mitään;}Oletukset:
Pakota painopiste napsautukseen:
<! - sijoita tämä koodi vain ennen viimeistä