title: How to hide or change the selection decorator on html buttons using bootstrap or css?
body: <p>I am using arrows buttons like <a href="http://jsfiddle.net/3cA4x/848/" rel="nofollow noreferrer">these ones</a>:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-default btn-arrow-left" &gt;&amp;nbsp;&lt;/button&gt;
  </code></pre>
  
  <pre><code>body { /* just for this demo. */
      padding: 30px;
  }
  .btn { /* just for this demo. */
      margin-top: 5px;
  }
  .btn-arrow-right,
  .btn-arrow-left {
      position: relative;
      padding-left: 18px;
      padding-right: 18px;
  }
  .btn-arrow-right {
      padding-left: 36px;
  }
  .btn-arrow-left {
      padding-right: 36px;
  }
  .btn-arrow-right:before,
  .btn-arrow-right:after,
  .btn-arrow-left:before,
  .btn-arrow-left:after { /* make two squares (before and after), looking similar to the button */
      content:"";
      position: absolute;
      top: 5px; /* move it down because of rounded corners */
      width: 22px; /* same as height */
      height: 22px; /* button_outer_height / sqrt(2) */
      background: inherit; /* use parent background */
      border: inherit; /* use parent border */
      border-left-color: transparent; /* hide left border */
      border-bottom-color: transparent; /* hide bottom border */
      border-radius: 0px 4px 0px 0px; /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */
      -webkit-border-radius: 0px 4px 0px 0px;
      -moz-border-radius: 0px 4px 0px 0px;
  }
  .btn-arrow-right:before,
  .btn-arrow-right:after {
      transform: rotate(45deg); /* rotate right arrow squares 45 deg to point right */
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
  }
  .btn-arrow-left:before,
  .btn-arrow-left:after {
      transform: rotate(225deg); /* rotate left arrow squares 225 deg to point left */
      -webkit-transform: rotate(225deg);
      -moz-transform: rotate(225deg);
      -o-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
  }
  .btn-arrow-right:before,
  .btn-arrow-left:before { /* align the "before" square to the left */
      left: -11px;
  }
  .btn-arrow-right:after,
  .btn-arrow-left:after { /* align the "after" square to the right */
      right: -11px;
  }
  .btn-arrow-right:after,
  .btn-arrow-left:before { /* bring arrow pointers to front */
      z-index: 1;
  }
  .btn-arrow-right:before,
  .btn-a
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/vjsy8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vjsy8.png" alt="enter image description here"></a></p>
  
  <p>But I do not know how can I hide or change the yellow decorator when it is selected. Is it possible?</p>
  
  <p><strong>NOTE:</strong> I am working with Bootstrap v3.3.7</p>