HTML- Select box on focus highlight border

Question

I'm trying to highlight the border of the select box/div when that box is in use to select an item

Here's the code on hTML side

  <div class="styled-1">                   
      <select>
          <option value="1">OPTION - 1</option>
          <option value="2">OPTION -2 </option>
          <option value="3">OPTION - 3</option>
      </select>
  </div>

Here's the CSS

.styled-1 select {
    width: 312px;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 5%;
    border: none;
    left: 50px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 50px;
    box-shadow: 0 0 3pt 2pt #8F4A11;
    outline: none !important;
}

What is the way pout to define a CSS of the type below for ".styled-1" above?

textarea:focus {
    outline: none !important;
    box-shadow: 0 0 3pt 2pt #719ECE;
}

I tried the below but no luck

.styled-1:focus {
        outline: none !important;
        box-shadow: 0 0 3pt 2pt #719ECE;
    }

Answer 1

:focus works on the select element; so, you can style the select element like this:

.styled-1 select:focus {
    box-shadow: 0 0 3pt 2pt #719ECE;    
}

Here's a JSfiddle showing the results: http://jsfiddle.net/n83p5qz7/

Answer 2

You can try

$('select').focus(
    function(){
        $(this).parent('div').css('border-style','solid');
    }).blur(
    function(){
        $(this).parent('div').css('border-style','dashed');
    });

You can have a look on the Fiddle