[Silk UI Web] How to apply css to higlight a Select2 control on focus

[Silk UI Web] How to apply css to higlight a Select2 control on focus

  
Forge Component
(47)
Published on 11 Nov (3 weeks ago) by OutSystems Labs
47 votes
Published on 11 Nov (3 weeks ago) by OutSystems Labs
The Select2 control does not have any indication it is in focus. It looks like it's a styled div container so doesn't get focus by default. Adding tabindex or contenteditable attributes in the Chrome developer tools doesn't solve the problem. 

How do I highlight when this control when it has the focus?

Thanks/Regards,
Gavin
Hi Gavin!

Im sorry for the late reply, you can set the focus style for the select2 component using this simple CSS:

a.select2-choice:focus {
  border: 1px solid #999;
  box-shadow: inset 0 2px 3px 0 rgba(0,0,0,.06);
}

The styles inside the block may be customized depending on your own theme, or one of Silk UI Themes.
This will be considered to be added to the framework themes, thanks for reaching us!

My regards,
Dinis Carvalho
Thanks Dinis, got me on the right track.

I had to use following css to get it to work.  Still a bit wierd, if I open a form and tab through the fields the first pass over a select2 doesn't trigger focus but if I say shift-tab back past the control and then tab to it it shows the border. I'll keep at I guess and try and figure it out :)

Thanks for your help.

.select2-container .select2-choice:focus {
  border: 1px solid #999;
  box-shadow: inset 0 2px 3px 0 rgba(0,0,0,.06);
}

Solution
Hello Gavin! 

I found another solution and hope it's help you. 

 .select2-container-active .select2-choice {
  border: 1px solid #999;
  box-shadow: inset 0 2px 3px 0 rgba(0,0,0,.06);
  border-radius: 4px;
 
.select2-container-active.select2-dropdown-open .select2-choice {
  border-bottom: 2px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  box-shadow: none;
}

Best Regards,
José Rosário
Solution
Thanks José, that's the right class.

Cheers,
Gavin