title: Give a select the same outline styling as an input
body: <p>My requirement is for select elements to have sharp edges like I have done with the mark up and css in the code.</p>
  
  <p>The problem is I want the selects to have the same styling as the inputs when they have focus.</p>
  
  <p>The inputs have a border and an outline.</p>
  
  <p>I can sort of get the same effect with the select but the border is rounded when they have focus as I cannot use outline twice.</p>
  
  <p>Is there a way round this?</p>
  
  <p><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>div {
    margin: 10px 0;
  }
  
  input[type="text"] {
    border: 1px solid #727272;
  }
  
  input[type="text"]:focus {
    border: 2px solid #0065bd;
    outline: 3px solid #ffbf47;
    outline-offset: 0;
  }
  
  select {
    outline: 1px solid #727272;
  }
  
  select:focus {
    border: 2px solid #0065bd;
    outline: 3px solid #ffbf47;
    outline-offset: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;input type="text" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;select&gt;
      &lt;option&gt;One&lt;/option&gt;
      &lt;option&gt;Two&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>