Styling the main box area of the control with CSS

How Do I...
#1

Hello there

Is it possible to style the main box area of the control with CSS? (i.e. the main area where the selected value is shown, rather than the options).

I am trying to remove the thin grey border, which is actually provided by the following section of select2.css:

.select2-container–default .select2-selection–single {
background-color: #fff;
border: 1px solid #aaa;
border-radius: 4px;

I could go in and change this style in select2.css, however I don’t want this effect on every select2 control, nor do I want to start “hacking” if I can really avoid it. I could probably also dynamically add some inline style using JQuery to override the CSS, however I would like something simpler and more elegant if possible.

Any help greatly appreciated.

Regards

Geoff Olding

#2

Just create an overriding rule in your own CSS file. If you need to, make your rule more specific by targeting a containing element on your page. For example:

#my-form .select2-container–default .select2-selection–single {
  border: none;
}
1 Like
#3

Many thanks

This has worked - for the record, I have added the following to my CSS to style all Select2 DropDowns that appear within table cells:

table .select2-container–default .select2-selection–single {
border: none;
}

Many thanks

Geoff Olding

1 Like
#4

Hi, Geoff–

I’m glad it worked for you. If you don’t mind, please click the heart icon beneath my suggestion. That helps improve my reputation on this site so other people know they can trust my suggestions.