Reference selector dropdown styling

Hi all   I am wanting to change the size of a reference selector drop down, and have found the class. As you can see, the dropdown box is huge compared to my other text boxes and I want these to be the same size. I am struggling to find the class.   But I have tried giving it a styling class via properties of .customDropdown which has the properties of the web CSS class, but it looks like this: It only edits the box behind it. Any help please?   EDIT: Tried overwriting the class
2 answers


Hi Vlad Gogalniceanu.

The solution to your problem is in the above reference image. Open your web application in your browser. Open the page you in which you have used reference selector. Right click and inspect. Use the cursor to find the div that uses reference selector. You will get the css part where you can edit the size.  Use the class and go to main.scss where you can edit/modify according to your needs.


Hope it helps. If you are stuck, please feel free to ask your question. 


The problem with dropdowns is that there's an extra group in between the point you add your class and the input.

So you'll need to specifically target the input (select) box. I don't know what ‘Reference-selector’ you're exactly using but testing it with the normal ‘reference selector’ you would need to adjust it like so

.customDropdown > > select.form-control 

and applying the styles on this select-box, that's my best advice for your problem!

So like you can see above, the customDropdown class is applied like 3 layers above the actual box you wish to change!