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

CSSHTMLjQuery

Last Comment

Richard Korts

8/22/2022 - Mon

Terry Woods

3/15/2020

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

Terry Woods

3/15/2020

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 Korts

3/15/2020

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

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst

William Peck

ASKER CERTIFIED SOLUTION

Terry Woods

3/15/2020

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts