Estoy tratando de ocultar el borde de la etiqueta que aparece cuando se presiona. Es decir, el borde alrededor del botón i. He intentado establecer el contorno y el borde en 0 e incluso en ninguno, pero nada funciona. ¿Qué estoy haciendo mal?
$(document).ready(function(){ $('#popoverData').popover(); }); <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div> <label for="download" style="float: left; margin-top: 6px">Content</label> <a id="popoverData" class="btn" href="#" data-content="My Content" rel="popover" data-placement="bottom" data-trigger="hover" style="float: left; margin-left: -10px; margin-top: 0px; border: none;">🛈</a> </div> </body> </html>Supongo que se refiere a la box-shadow de a.btn , puede eliminarla agregando la siguiente regla CSS:
.btn:active { box-shadow: none !important; -webkit-box-shadow: none !important; } $(document).ready(function(){ $('#popoverData').popover(); }); .btn:active { box-shadow: none !important; -webkit-box-shadow: none !important; } <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div> <label for="download" style="float: left; margin-top: 6px">Content</label> <a id="popoverData" class="btn" href="#" data-content="My Content" rel="popover" data-placement="bottom" data-trigger="hover" style="float: left; margin-left: -10px; margin-top: 0px; border: none;">🛈</a> </div> </body> </html>Depende de lo que quiera decir: si hace clic y mantiene presionado el botón, es la sombra la que aparece (consulte la respuesta anterior), pero si simplemente hace clic en el botón y suelta el mouse, se enfocará. Entonces, en este caso, puede agregar una regla CSS para el estado de focus , como esta:
a#popoverData:focus { outline: none; }Pero tenga en cuenta que esto estará en contra de las reglas de accesibilidad, ya que las personas que navegan solo con las acciones del teclado ya no verán qué elemento está seleccionado/enfocado.
Ejemplo completo (es decir, la regla anterior simplemente agregada al código en la pregunta):
$(document).ready(function() { $('#popoverData').popover(); }); a#popoverData:focus { outline: none; } <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div> <label for="download" style="float: left; margin-top: 6px">Content</label> <a id="popoverData" class="btn" href="#" data-content="My Content" rel="popover" data-placement="bottom" data-trigger="hover" style="float: left; margin-left: -10px; margin-top: 0px; border: none;">🛈</a> </div> </body> </html>