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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
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/
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Chris StanyonWebDevCommented:
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?


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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
srbarker8Author Commented:
Ok, thank you.

I will try that now.

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.