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