We help IT Professionals succeed at work.

Apply <select> css to only specific <select>'s

Richard Korts
on
I have a need to have HTML select options display on more than one line so the width is not super wide on smaller devices.

I have a great solution, a sample of it's usage is illustrated in the attached html.

I need a slight variation on this, in that the "real" program has several selects, I only want the one that limits the width to apply to ONE of the <select> elements in a specific html page.

I'm guessing I could somehow define the whole mechanism that wraps as a class & apply that class ONLY to the <select> element I need to use it on.

I'm not sure how to do that. Can someone advise?

Thank you
test_mline_select.htm
Comment
Watch Question

Terry WoodsWeb Developer, specialising in WordPress
SILVER EXPERT
Most Valuable Expert 2011

Commented:
Presumably, if there's no more than one select element of that type on a page, you could use an id attribute on the element, and update your CSS to target that id eg something like this, depending on your page structure:
.selectboxit-container #my-special-select .selectboxit,
.selectboxit-container #my-special-select .selectboxit-options {
    width: 400px;
    /* Width of the dropdown button */
    border-radius: 0;
    max-height: 240px;
}

#my-special-select .selectboxit-options .selectboxit-option .selectboxit-option-anchor {
    white-space: normal;
    min-height: 30px;
    height: auto;
}
Terry WoodsWeb Developer, specialising in WordPress
SILVER EXPERT
Most Valuable Expert 2011

Commented:
Or as you say you could use a class, which is more appropriate than an id if there can be more than one element to apply the style to.
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
Terry,

There is more than one element, that is the whole purpose of the question.

I am not good enough at CSS & classes to know how to encapsulate the features needed for this style into a class
& then apply it to the applicable element.

Thank you,

Richard
Web Developer, specialising in WordPress
SILVER EXPERT
Most Valuable Expert 2011
Commented:
I've updated your example to target a class "use-selectboxit" with the javascript that makes use of the SelectBoxIt tool.
To demonstrate that it works, I modified the example to contain 3 selects, with the 2nd one targeted using the new class.
Let me know if you have any questions. :-)

test_mline_select - fixed.htm
Richard KortsBusiness Owner / Chief Developer

Author

Commented:
Terry,

Perfect, thanks!