[Resolved] Apply CSS to just one out of many SELECTs in Forms

[Author]

Posts

[nicolaS-3]

Hi,
I have a post form with 2 selects, the first one is multiple selection, the second one is single selection. I want the first one to be taller than the second one in order to show more items to help the multiple selection. If I use the CSS: select {height: 145px;} it works but on ALL selects of the form. Could you please let me know how can I refer the CSS just to the first select ?
I have tried lots of different ways like:

.select [id="cred_form_2299_1-select-1-1617976251"]{height: 145px;} or
#cred_form_2299_1-select-1-1617976251 {height: 145px;} or
adding a class to the cred field, but none worked.

So I decided to transform the second select as radio buttons, I thought I'd solved but then the month and year in the calendar of date fields get the new height too ! see picture.
Please help thanks
Regards
Nicola

[Jamal]

Hello Nicola and thank you for contacting the Toolset support.

You can use the form field name like this:

select[name=wpcf-book-status] {
    height: 145px;
}

Note that you should not have a space between "select" and [name=wpcf-book-status].
Notice that Toolset will add a "wpcf-" prefix to the fields that were created using Toolset.

[nicolaS-3]

Hello Jamal, thanks for replying. I tried your solution, but it didn't work for me. The field name is category, I applied:
select[name=wpcf-category] (and also tried select[name=category] and select[name="wpcf-category"] )

I found this one works and doesn't impact the calendar in other date fields : select[multiple], select[size] but I suppose it applies to any select multiple on the form ... that's ok for me anyways in this case, but I'd like to know how to target just one select if I'd need to.
Thanks
Regards
Nicola

[Jamal]

Hello Nicola,

I believe the selector that I suggested will let you target only the named select field. If that does not work as expected, I'd like to take a closer look at your form and find out why, maybe the theme or a 3rd party plugin applies a prioritized selector. I wouldn't know if I don't check the form in the backend. Would you let me check it? If yes, your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **
Please let me know what form and where does it is used in the frontend?

[nicolaS-3]

Hi Jamal
I got your reply by email, but when I click on the REPLY VIA SECURE FORM button I get 403 Forbidden error, I don't know why, it always worked .... if I copy the link to the Chrome link bar it brings me here where I don't see your reply. Please let me know, thanks

Actually after I saved this message I can see your reply but no secure form ...

[Jamal]

Please clear the browser cache or try with a different browser. I am setting your next reply to be private.

[Jamal]

I don't know where these forms are used, so I took the form "Add posts" used in hidden link as it has the categories select field. The selector that I suggested before is for custom fields. For taxonomies, you need to use the taxonomy slug like this:

select[name="category[]"] {
    border: 1px solid red;
    padding: 10px;
    margin: 10px;
}

Note that "[]" is added to the taxonomy select field, because taxonomies accept multiple terms assignment, so it expects an array of values(terms)

I hope this helps. Let me know if you have any questions.

[nicolaS-3]

My issue is resolved now. Thank you!