[Resolved] Selector naming and customisation

[Author]

Posts

[kelvinL-2]

Dear Sir/Madam,

I have a parent-child add new post form, I want to customize the style to the parent field, how can I custom name the selector? I can't find the select1, how does the Toolset name the selector?

Here is the shortcode I placed in form

<div class="form-group">
	<label for="%%FORM_ID%%_@application-contestant.parent"></label>
	[cred_field field='@application-contestant.parent' class='form-control' output='bootstrap' select_text='--- not set ---' required='true']
</div>

Best regards,

Kelvin.

[Christian Cox]

If it's the only select2.js enabled select field in the Form, you can use the selector:

.toolset_select2.toolset_select2-container.toolset_select2-container--default

Sometimes overriding specific styles requires more specific selectors, so it depends on what you're trying to accomplish.

[kelvinL-2]

Dear Christain,

I think I have to ask how I can custom name the selector when using the cred_field

<div class="form-group">
    <label for="%%FORM_ID%%_@application-contestant.parent"></label>
    [cred_field field='@application-contestant.parent' class='form-control' output='bootstrap' select_text='--- not set ---' required='true']
</div>

I want to name it and then I can design the CSS

[Christian Cox]

There's no way to directly impact the CSS classnames on the span tag, but you could try either of these alternatives:
- Use an adjacent sibling selector that targets the select field as an adjacent sibling:

[cred_field field='@application-contestant.parent' class='form-control my-custom-class' output='bootstrap' select_text='--- not set ---' required='true']

.my-custom-class + .toolset_select2.toolset_select2-container.toolset_select2-container--default {
 /* your styles here */
}

- Target your selector using the ancestor div tag with an attribute selector:

div[data-item_name="select-@application-contestant.parent"] .toolset_select2.toolset_select2-container.toolset_select2-container--default {
  /* your styles here */
}

[kelvinL-2]

Dear Christian,

May I know whether toolset_select2 is predefined and won't be changed if I add selector from different form?

Best regards,

Kelvin.

[Christian Cox]

May I know whether toolset_select2 is predefined and won't be changed if I add selector from different form?
Yes, toolset_select2 is predefined. There is no toolset_select1, toolset_select3, etc., only toolset_select2.
This class is part of the select2.js implementation in Forms relationship fields. If there are only a few possible related posts to choose from, a standard HTML select field dll be shown. If there are more than a specific number of related posts (I think it's 15 or 16), then the select2.js replacement will be shown instead.

https://select2.org/

[kelvinL-2]

My issue is resolved now. Thank you!