Custom ComboBox css

Hi guys,
i recently found combobox and i managed to adapt your library to my wordpress theme, but now i would like to change it’s style (mainly the box)

i managed to change the background color of the textarea and the font but i don’t have a clue on where can i change the border of the box, and the height and width of the box. could you please tell me what do i need to edit please?

Plus, is the web skin a responsive one or should i make it so?

(i’m using the dhtmlxcombo_dhx_web.css)

Here is a little code sample for you with some settings:

comboBase = combo.getBase(); = "#b1daf6"; = "#3da0e3"; = "2px"; = "50px"; combo.getInput().style.backgroundColor = "#b1daf6"; combo.getList().style.backgroundColor = "#d1e8f8";
The result is on the picture:

Hi there! thanks! i managed to solve this today (before i read your answer) and it was pretty much similar to your answer hehe.

i have another answer, though, could you tell me how can i make the combobox responsive? i have the web skin. i chose that one cause i thought it would be responsive but it’s not.

i suppose i have to use the @max-width attribute or something, but i don’t know which css attribute controls the combobox width :frowning:
could you help me out with this?

Combo will not be responsive on window resize, but at first init it can be adapt to the container size
Something like if

<div id="combo_zone" style='width:100%'></div> ... var myCombo; function doOnLoad() { myCombo = new dhtmlXCombo("combo_zone", "combo"); myCombo.load("../common/data2.json"); }
Combo will have 100% width too

Plus there is a method setSize

Cool i’ll try that!

do you, by any chance, know if i can i add the @media attribute to the style?

Yes, you can add it :slight_smile:

Could you please tell me which css attribute controls the width? i have only 1 css file (dhtmlxcombo_dhx_web.css) but i can’t seem to find it.

i’ve been trying to add @media queries at the end of the file:

[code]@media(max-width: 500px) {

@media(max-width: 767px) {

@media(max-width: 1200px) {

But i have to add !important to one of them for it to actually change, and if i do so in every media query, it will not resize at all, it will remain with the last width set (400px).

The only other code i have is this:

with this setting it’s only adding a 100% width, which is a nice workaround but if you resize the windows, the bar won’t resize so it’s only a temp. fix.

and this is how i’m creating the combobox: (the screenshot didn’t get the last bracket but it’s there).

the code works alright, the only problem here is that i don’t know where is the “default” size coming from, nor do i know what controls the width of the search bar, and without that i won’t know how to code the queries :confused:

could you please help me out?


oh yeah and i also have another problem.
Whenever i put the div element with the combobox, it sort of eliminates the background color where it’s put on, what css attribute should i edit if i want to add a background color? (i’ve tried adding some styling to the div element and also to the p element and then wrapping the whole div into a p but it doesn’t work. i’ve also tried adding adding a style inside the div tag with the same negative result).

Thank you very much!

To get help for a solution of your issue please open a ticket in our support system:

Nevermind! found the solution! it took a lot of trial and error but i did it, here’s what i did in case everybody else wandered:

@media (max-width:767px) {
width:80% !important;
@media (max-width:500px) {
width:100% !important;
@media (max-width:1200px) {
width:60% !important;


by the way do i have to buy a premium licence to get support? i don’t know if i have any support number or something like that (i downloaded everything with the standard plan i believe. the one that was for free)

I thought i had the combo resizing but it turns iut it isn’t (it was only a cache issue) so i’m kind of surrendering here, i don’t know the combo css so i’m having a very hard time adapting it :confused:

Please contact to get more details about our licenses.