CSS set width of specific selectize drop down

Hi there,

I am trying to work with the selectize.js jquery plugin.

Using firebug, I've found that I can alter the css of selectize drop down using these classes

  .selectize-input, .single.selectize-control .focus.selectize-input
      padding-top: 2px;
      padding-bottom: 2px;
      padding-right: 4px;
      padding-left: 6px;
      font-size: 0.82em;
      background-color: #eeeeee;
      margin-top: 2px;
      margin-bottom: 2px;

... this allows me to override the drop down ... but I want to do this for only one specific selectize drop down on the page ... (by ID) and not all of them.

How do I alter the above css to affect only a specific one by id ...

...say with the id 'txtCity'

Please help.

Thx Scott
Who is Participating?
GaryConnect With a Mentor Commented:
The plugin will apply those classes to all elements it creates, it won't pass any ID.
If you put an ID in the dropdown it is ignored i.e. it will not be used in the new elements it creates to simulate the dropdown, so you can not target it (well you can but the dropdown is hidden so you won't see anything)

You could start using nth-child and the like, but it would be easier to just add a class name to the dropdown you want to target.
Chris StanyonCommented:
Something like this:

#txtCity { ... }
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It is possible Experts may not have used that specific plug in but can still easily help you.  Please post a link to a sample page you have created.  Keep the sample simple to just one of the samples they show http://brianreavis.github.io/selectize.js/.  We don't need to see all of your code, just what you are using.

Otherwise, you can recreate something in http://jsbin.com/ or http://jsfiddle.net/
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

srbarker8Author Commented:
Hi there,

OK,  there is a simple example at:


I want to be able to make css changes only to the second drop-down ... and via what I am guessing is a combination of the css shown above along and ID selector..

But I do not know how to do that.

Please help.

Thx Scott
Chris StanyonCommented:
We've already posted the code on how to overwrite your styles for an element with an ID -  just use the ID selector with your new styles - that's it!

What seems to be the problem?
The ID is not passed with the plugin
You need to use a unique class name for the second dropdown - this will be passed into the new elements along with the plugins own classes and then you can write up your css to target this unique class name.
srbarker8Author Commented:
Hi Gary,

Thank your for your suggestion.  As I am generating that page on the fly server side, I might be able to do that.  And, if there is no other suggestion I will try that.

But, what I was hoping for/wondering about is ... (as I am not a css expert) ... if I generate a css fragment on the fly, can I write that small css entry to target those classes but only for a specific ID?

these classes:    .selectize-input, .single.selectize-control .focus.selectize-input

Ideas or not possible?


srbarker8Author Commented:
Ok, thank you.

I will try that now.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.