Hide border of label-CodePudding

I am trying to hide border of label that appears when pressed on. That is, the border around the i button. I have tried setting outline and border to 0 and even to none but nothing works. What am I doing wrong?

$(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"  href="#" data-content="My Content" 
        rel="popover" data-placement="bottom" data-trigger="hover" style="float: left; margin-left: -10px; margin-top: 0px; border: none;">&#x1F6C8;</a>
</div>

</body>
</html>

CodePudding user response：

I assume you refer to the box-shadow of the a.btn, you can remove it by adding the following CSS rule :

.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"  href="#" data-content="My Content" 
        rel="popover" data-placement="bottom" data-trigger="hover" style="float: left; margin-left: -10px; margin-top: 0px; border: none;">&#x1F6C8;</a>
</div>

</body>
</html>

CodePudding user response：

It depends what you mean: If you click and hold on the button, it's the shadow which appears (see previous answer), but if you just click the button and release the mouse, it will be focused. So in this case you can add a CSS rule for the focus state, like this:

a#popoverData:focus {
  outline: none;
}

But note that this will be against accessibility rules, since people navigating only by keyboard actions will not see anymore which element is selected/focused.

Full example (i.e. above rule simply added to the code in the question):

$(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"  href="#" data-content="My Content" rel="popover" data-placement="bottom" data-trigger="hover" style="float: left; margin-left: -10px; margin-top: 0px; border: none;">&#x1F6C8;</a>
  </div>

</body>

</html>