title: How to remove border highlight on an <select> after press it
body: <p>How can I disable the <code>&lt;select&gt;</code> border highlight (outline) after it got focus. I'm able to disable it for the other elements like <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, <code>&lt;button&gt;</code> but not for <code>&lt;select&gt;</code> tag.</p>
  
  <p>Here are my CSS, I did include <code>select:focus</code> but it just not working. :(</p>
  
  <pre><code>input:focus,
  select:focus,
  option:focus,
  textarea:focus,
  button:focus {
      outline: none;
  }
  </code></pre>
  
  <p>Here's the snippet:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input:focus,
  select:focus,
  textarea:focus,
  button:focus {
    outline: none !important;
  }
  
  body {
    padding: 40px 20px 20px 20px;
  }
  
  .qa-collapse {
    background-color: rgb(245, 245, 245);
  }
  
  .qa-input {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    border-right: none !important;
    border: 1px solid #F2F2F2;
    width: 82%;
    padding: .25rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-image: none;
    background-clip: padding-box;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }
  
  .qa-search {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    background-color: #E01E34;
    border: 1px solid #E01E34;
    padding: .2rem .75rem;
  }
  
  input[type="text"].qa-input::-webkit-input-placeholder {
    color: ;
    font-size: 80%;
    font-family: PosLight;
  }
  
  .qa-search img {
    margin-top: -3px;
  }
  
  .qa-form-inline {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
  }
  
  .qa-track-trace p {
    font-family: PosLight;
    font-size: 12px;
    padding: 0 2.6rem 0 0.7rem;
    color: #999999;
  }
  
  .nav-tabs {
    border: 0px;
  }
  
  .nav-tabs .nav-link.active {
    border: 0px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    background-color: transparent;
    border-color: transparent;
  }
  
  .nav-tabs .nav-link:hover {
    border-color: transparent;
  }
  
  .nav-tabs .nav-link {
    border: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    background-color: transparent;
  }
  
  .qa-send-lp-tab {
    color: rgba(0, 0, 0, .5);
    display: block;
    padding: 0rem 1rem;
  }
  
  .qa-send-lp-tab:hover {
    color: rgba(0, 0, 0, .7);
  }
  
  .qa-send-lp-tab.active {
    color: #E11F34 !important;
  }
  
  .qa-track-trace p {
    font-family: PosLight;
    font-size: 12px;
    padding: 0 2.6rem 0 0.7rem;
    color: #999999;
  }
  
  .qa-input-full {
    border-radius: 50px;
    border: 1px solid #F2F2F2;
    width: 100%;
    padding: .25rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-image: none;
    background-clip: padding-box;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }
  
  input[type="text"].qa-input-full::-webkit-input-placeholder {
    color: ;
    font-size: 80%;
    font-family: PosLight;
  }
  
  input[type="text"].qa-input-full::-webkit-input-placeholder {
    color: ;
    font-size: 80%;
    font-family: PosLight;
  }
  
  .qa-dropdown {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    background-color: #E01E34;
    border: 1px solid #E01E34;
    padding: .20rem .75rem;
  }
  
  .qa-dropdown img {
    margin-top: -3px;
  }
  
  select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url("data:image/svg+xml;utf8,&lt;svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18' height='18' viewBox='0 0 24 24'&gt;&lt;path fill='grey' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'&gt;&lt;/path&gt;&lt;/svg&gt;") #fff;
    /* background: url(../img/dropdown-2.svg); */
    /* background: url(../img/dropdown.svg); */
    /*background-position: 91.5% 50%; */
    background-position: 95% 50%;
    background-repeat: no-repeat;
  }
  
  select.form-control:not([size]):not([multiple]) {
    height: 35px;
    border: 1px solid #F2F2F2;
    border-radius: 50px;
    border: 1px solid #F2F2F2;
    width: 100%;
    padding: .25rem .75rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }
  
  .styled-select {
    font-size: 12px;
    font-family: 'PosLight';
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"&gt;
    
  &lt;form class="qa-form-inline mt-2"&gt;
  &lt;select name="dbType" id="selectOptions" class="form-control required styled-select"&gt;
      &lt;option value="option-select" disabled selected&gt;Service&lt;/option&gt;
   &lt;option value="option-1" class="option-grams"&gt;Example&lt;/option&gt;
   &lt;option value="option-2" class="option-grams"&gt;Example&lt;/option&gt;
   &lt;option value="option-3" class="option-grams"&gt;Example&lt;/option&gt;
   &lt;option value="option-4" class="option-grams"&gt;Example&lt;/option&gt;
   &lt;option value="option-5" class="option-grams"&gt;Example&lt;/option&gt;
   &lt;option value="option-6" class="option-grams"&gt;Example&lt;/option&gt;
   &lt;option value="option-7" class="option-grams"&gt;Example&lt;/option&gt;
   &lt;option value="option-8" class="option-grams"&gt;Example&lt;/option&gt;
     &lt;/select&gt;
  &lt;/form&gt;
    
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>