Styling of Lookup-Buttons

[jsetzer]

Good morning everyone!
Here is just a very short tip on styling lookup buttons for matching with your default user interface design

Default Style

Here is what lookup-buttons, modified by built-in select2-library, do look like by default in standard theme:

chrome_1bjVVT50Pj.png (6.46 KiB) Viewed 4105 times

As you can see, in comparison to standard <input/> controls there is a difference in background-gradient and border-color.

Background- and border-color

For removing the background-color and changing the border-color, the following CSS is all you need:

Code: Select all

/* css */
.select2-container>.select2-choice {
    background-image: none;
    border-color: #ccc;
}

2nNDaScrUW.png (6.05 KiB) Viewed 4105 times

Changing Arrow-Button

Additionally, I'd like to remove the gradient from the dropdown-buttons (arrow-buttons), too:

Code: Select all

.select2-container>.select2-choice>.select2-arrow {
    background-image: none;
    background-color: #fff;
    border-left-color: #ccc;
}

s62y7igNEf.png (5.86 KiB) Viewed 4105 times

---

PS: If you are using a different theme, you can change the colors accordingly.

PPS: Unfortunately, we can not easily change color of arrow nor increase the width of those arrow-buttons, because the select2-component uses a static background-image and some background-image-positioning-trick on the following image:

select2[1].png (1.01 KiB) Viewed 4105 times

Increasing the button-width would show parts of that image which we don't want to see.

PPPS: I know, this is just a very small detail and not a big deal. Anyway, I hope you and your users prefer UI-consistency as I do.