[Resolved] Post Form that has Dropdowns using JQuery Select2, the field is not highlighted

[Author]

Posts

[Mukesh]

Beda helped me with the issue of a CRED Post Form losing the tabbing order when using keyboard navigation on a Select2 dropdown. The issues is stated here: https://toolset.com/forums/topic/post-form-that-has-dropdowns-using-jquery-select-the-tabbing-order-is-lost-2/

There is an Errata for the above issue which helped me solve the tabbing order. However I would like to ask how to make the visual border around the DropDown appear when tabbing. Currently it is not indicated and so user does not know if the Dropdown is in focus.

[Minesh]

Hello. Thank you for contacting the Toolset support.

It looks like you need to add custom CSS and target your select2 element. Can you please try to check and apply the following solution:
=> https://stackoverflow.com/questions/43051735/how-can-i-set-a-border-around-each-of-my-select2-select-box

[Mukesh]

Hi Minesh. The code in stackoverflow is for making the border red on load I believe. I would like to have the border on the drop down that gets focus only. Just like the text boxes. Any suggestions or sample code to do it on tab focus? Thanks.

[Minesh]

To apply border only on the focus you should try to use the following way (adjust HTML target element accordingly):
=> https://stackoverflow.com/questions/39293952/how-to-properly-style-the-select2-outline-on-focus

[Mukesh]

My issue is resolved now. Thank you! For highlighting I used the following code for others to reference:

.toolset_select2-container *:focus {
    border-color: #66afe9;
  outline: 15;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  }