Remove edge that appears in browser Chrome and Firefox

Asked

Viewed 2,201 times

1

How to remove edge that appears in browser Chrome and Firefox. Already in browser Edge does not appear.

inserir a descrição da imagem aqui

.fa-admin {
  font-size: 23px !important;
  line-height: .75em;
  vertical-align: -15%;
  position: absolute;
}

.avisosAdminNum,
.mensagensAdminNum {
  font-size: 12px;
  //font-weight: bold;
  position: relative;
  background-color: #d11010;
  color: white;
  border-radius: 30%;
  bottom: 7px;
  left: 21px;
}
<script src="https://use.fontawesome.com/785bf17c00.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>


<a tabindex="0" class="btn popover-dismiss avisosAdmin" data-placement="bottom" data-toggle="popover" data-html="true" data-trigger="focus" title="Avisos">
      <i class="fa fa-bell fa-admin btn-preto "></i>
      <div class="avisosAdminNum ">99</div>
</a>

<a tabindex="0 " class="btn popover-dismiss mensagensAdmin "data-placement="bottom " data-toggle="popover " data-html="true " data-trigger="focus " title="Mensagens">
      <i class="fa fa-commenting fa-admin btn-preto"></i>
      <div class="mensagensAdminNum">99</div>
</a>

html css html5 css3
  • 1

    Have you tried using bottom and right of the CSS?

  • @Andersoncarloswoss Thank you, solved.

  • @Andersoncarloswoss I did it, but I have another question, see if you can help me.

  • You should not do this, mainly for the sake of Accessibility... http://www.outlinenone.com/

1 answer

1

The class .btn when you have the :focus together ends up adding a box-shadow generating the appearance of an edge, you need to add in your class . btn:Focus the box-shadow: None ! Important to overwrite the bootstrap class.

<style>
.fa-admin {
  font-size: 23px !important;
  line-height: .75em;
  vertical-align: -15%;
  position: absolute;
}

.avisosAdminNum,
.mensagensAdminNum {
  font-size: 12px;
  //font-weight: bold;
  position: relative;
  background-color: #d11010;
  color: white;
  border-radius: 30%;
  bottom: 7px;
  left: 21px;
}

.btn:focus {
  box-shadow: none !important;
}


</style>
<script src="https://use.fontawesome.com/785bf17c00.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>


<a tabindex="0" class="btn popover-dismiss avisosAdmin" data-placement="bottom" data-toggle="popover" data-html="true" data-trigger="focus" title="Avisos">
      <i class="fa fa-bell fa-admin btn-preto "></i>
      <div class="avisosAdminNum ">99</div>
</a>

<a tabindex="0 " class="btn popover-dismiss mensagensAdmin "data-placement="bottom " data-toggle="popover " data-html="true " data-trigger="focus " title="Mensagens">
      <i class="fa fa-commenting fa-admin btn-preto"></i>
      <div class="mensagensAdminNum">99</div>
</a>

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.