asked on

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

Chris Stanyon

Something like this:

#txtCity { ... }

Scott Fell

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/

srbarker8

ASKER

Hi there,

OK, there is a simple example at:

http://carcaraway.com/select_test.html

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 Stanyon

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?

Gary

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.

srbarker8

ASKER

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?

??

Scott

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

srbarker8

ASKER

Ok, thank you.

I will try that now.

Scott