Je travaille sur une page Web et je souhaite des <button>
balises de style personnalisé . Donc , avec CSS, je l' ai dit: border: none
. Maintenant, cela fonctionne parfaitement en safari, mais en chrome, lorsque je clique sur l'un des boutons, il met une bordure bleue agaçante autour de lui. Je pensais button:active { outline: none }
ou button:focus { outline:none }
travaillerais, mais ni l'un ni l'autre. Des idées?
Voici à quoi cela ressemble avant d'être cliqué (et à quoi je veux qu'il ressemble toujours après avoir été cliqué):
Et c'est la frontière dont je parle:
Voici mon 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;
}
outline: none
comme ceci, sauf si vous êtes prêt à remplacer la perte d'accessibilité. Voir ce site: outlinenone.com