CODEWITHSUNDEEP
htmlcss
User12345
User12345

Reputation: 325

HTML- Select box on focus highlight border

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;
    }

Upvotes: 6

Views: 43497

Answers (3)

hktang
hktang

Reputation: 1833

: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/

Upvotes: 12

Antonio Hern&#225;ndez
Antonio Hern&#225;ndez

Reputation: 466

It doesn't work because you are passing the :focus pseudo-selector to the div instead of the element inside the select you want to target. Try something like this:

.styled-1 > select option:focus {
                 border: 1px solid 'your preferred color here'
                 box-shadow: 0 0 3pt 2pt #719ECE;

}

Edit: Seems that I misunderstood your objective. This works but not to what you want to achieve.

Upvotes: 0

Mohit S
Mohit S

Reputation: 14024

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

Upvotes: 1

Related Questions