Ik werk aan een webpagina en ik wil aangepaste <button>-tags. Dus met CSS zei ik: border: none. Nu werkt het perfect in safari, maar als ik in chrome op een van de knoppen klik, komt er een irritante blauwe rand omheen. Ik dacht dat button:active { outline: none }of button:focus { outline:none }zou werken, maar geen van beide. Om het even welke ideeën?
Zo ziet het eruit voordat er op wordt geklikt (en hoe ik wil dat het er nog steeds uitziet nadat erop is geklikt):
En dit is de grens waar ik het over heb:
Hier is mijn CSS:
button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}
button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.change:hover {
cursor: pointer;
background-color: #F89900;
}
button:active {
outline: none;
border: none;
}
Antwoord 1, autoriteit 100%
Dit wordt niet aanbevolenomdat het de toegankelijkheidvan uw site; voor meer info, zie dit bericht.
Dat gezegd hebbende, als je erop staat, zou deze CSS moeten werken:
button:focus {outline:0;}
Bekijk het of JSFiddle: http://jsfiddle.net/u4pXu/
Of in dit fragment:
button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}
button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}
button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.change:hover {
cursor: pointer;
background-color: #F89900;
}
button:active {
outline: none;
border: none;
}
button:focus {outline:0;}<button class="launch">Launch with these ads</button>
<button class="change">Change</button>Antwoord 2, autoriteit 18%
Wacht! Er is een reden voor die lelijke omtrek!
Voordat je die lelijke blauwe omtrek verwijdert, moet je misschien rekening houden met toegankelijkheid. Standaard wordt die blauwe omtreklijn op focusbare elementen geplaatst. Dit is zodat gebruikers met toegankelijkheidsproblemen die knop kunnen focussen door erop te tikken. Sommige gebruikers hebben niet de motorische vaardigheden om een muis te gebruiken en moeten alleen het toetsenbord (of een ander invoerapparaat) gebruiken voor computerinteractie. Wanneer u de blauwe omtreklijn verwijdert, is er niet langer een visuele indicatie van welk element is gefocust. Als je de blauwe omtrek wilt verwijderen, moetdeze vervangen door een ander type visuele indicatie dat de knop scherp is.
Mogelijke oplossing: knoppen donkerder maken wanneer ze zijn scherpgesteld
Voor de onderstaande voorbeelden is de blauwe omtrek van Chrome eerst verwijderd met behulp van button:focus { outline:0 !important; }
Dit zijn uw basis Bootstrap-knoppen zoals ze er normaal uitzien:
Dit zijn de knoppen wanneer ze de focus krijgen:
Hier de knoppen wanneer ze worden ingedrukt:
Zoals je kunt zien, zijn de knoppen een beetje donkerder wanneer ze worden scherpgesteld. Persoonlijk zou ik aanraden om de gefocusseerde knoppen nog donkerder te maken, zodat er een zeer merkbaar verschil is tussen de gefocuste toestand en de normale toestand van de knop.
Het is niet alleen voor gehandicapte gebruikers
Het toegankelijker maken van uw site wordt vaak over het hoofd gezien, maar kan helpen om een productievere ervaring op uw website te creëren. Er zijn veel normale gebruikers die toetsenbordcommando’s gebruiken om door websites te navigeren om de handen op het toetsenbord te houden.
Antwoord 3, autoriteit 4%
Ik verwijder de omtrek van alle tags op de pagina door alles te selecteren en outline:none op alles toe te passen:)
*:focus {outline:none}
Zoals bagofcole al zei, moet je misschien ook !important toevoegen, dus de stijl ziet er als volgt uit:
*:focus {outline:none !important}
Antwoord 4, autoriteit 4%
In mijn geval van dit probleem moest ik box-shadow: none
specify opgeven
button:focus {
outline:none;
box-shadow: none;
}
Antwoord 5, autoriteit 3%
Vergeet de !importantdeclaratie niet, voor een beter resultaat
button:focus {outline:0 !important;}
Een regel met de eigenschap !important wordt altijd toegepast, ongeacht waar die regel in het CSS-document staat.
Antwoord 6, autoriteit 2%
Het verwijderen van outlineis slecht voor de toegankelijkheid! Idealiter verschijnt de focusring alleen wanneer de gebruiker van plan is het toetsenbord te gebruiken.
Gebruik :focus-visible. Het is momenteel een W3C-voorstel voor het stylen van alleen toetsenbordfocus met CSS, en wordt ondersteund in Firefox (caniuse). Totdat andere grote browsers het ondersteunen, kun je deze robuuste polyfillgebruiken.
/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
outline: none;
}
/* Optional: Customize .focus-visible */
.focus-visible {
outline-color: lightgreen;
}
Ik heb ook een meer gedetailleerd berichtgeschreven voor het geval je meer nodig hebt informatie.
Antwoord 7
Voeg dit toe aan uw CSS-bestand.
*{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
8
Een andere manier om het toegankelijkheidsprobleem op te lossendat hier nog niet is genoemd, is door een klein beetje Javascript. Credits gaan naar deze inzichtelijke blogpost van hackernoon: https: //hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2
De aanpak hier is heel eenvoudig maar effectief: Een klas toevoegenwanneer mensen de tab-toets gaan gebruiken om door de pagina te navigeren (en optioneel verwijderen wanneer ze weer naar de muis overschakelen. Dan kun je deze klas om een focusoverzicht weer te geven of niet.
function handleFirstTab(e) {
if (e.keyCode === 9) { // the "I am a keyboard user" key
document.body.classList.add('user-is-tabbing');
window.removeEventListener('keydown', handleFirstTab);
}
}
window.addEventListener('keydown', handleFirstTab);
Antwoord 9
Ik had hetzelfde probleem, dus ik gebruikte eenvoudige CSS-
.custom-button {
outline: none
}
Antwoord 10
Als u hetzelfde effect in invoer wilt verwijderen, kunt u de volgende code en een knop toevoegen.
input:focus {outline:0;}
Antwoord 11
Schrijf gewoon outline:none;. Het is niet nodig om pseudo-element focus
te gebruiken
Antwoord 12
Ok, zelfs met het risico dat niemand dit te zien krijgt, omdat er al zoveel antwoorden zijn dat ik vanaf het jaar 2020 meer js-oplossingen wilde aanbieden, er zijn er genoeg:
outline.jsof als alternatief outliner.jsbeide bibliotheken lossen precies de problemen op die we hier allemaal hebben: verwijder contouren voor muizen maar behoud toetsenbordfunctionaliteit of toegankelijkheid.
Dus in plaats van te beslissen welke stijl of toegankelijkheid belangrijker is, kiest u beide!