Link to home
Start Free TrialLog in
Avatar of Richard Korts
Richard KortsFlag for United States of America

asked on

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

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
Avatar of Terry Woods
Terry Woods
Flag of New Zealand image

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;
}

Open in new window

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.
Avatar of Richard Korts

ASKER

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
ASKER CERTIFIED SOLUTION
Avatar of Terry Woods
Terry Woods
Flag of New Zealand image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Terry,

Perfect, thanks!