Skip Navigation

[Gelöst] Styling with data-parent attribute

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

Problem: I would like to style the options in a select field differently based on whether the taxonomy is a parent or child element.

Solution: Use CSS data attribute selectors to apply styles based on option element data attributes.

Relevant Documentation: https://css-tricks.com/almanac/selectors/a/attribute/

This support ticket is created vor 7 Jahren, 7 Monaten. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Heute stehen keine Supporter zur Arbeit im Werkzeugsatz-Forum zur Verfügung. Sie können gern Tickets erstellen, die wir bearbeiten werden, sobald wir online sind. Vielen Dank für Ihr Verständnis.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

Dieses Thema enthält 2 Antworten, hat 2 Stimmen.

Zuletzt aktualisiert von Pat vor 7 Jahren, 7 Monaten.

Assistiert von: Christian Cox.

Author
Artikel
#505846

Pat

Hello,

I have a search Views that includes a select taxonomy field. This taxonomy is a hierarchical one and I want to display differently the parents.
Looking at the code, here what I'm getting to display the page :

<select id="cred_form_95_0-select-5-1490504521" class="wpt-form-select form-select form-control" data-wpt-type="select" name="type-d-objet[]">
For a parent :

<option value="15" data-parent="-1" class="wpt-form-option form-option" data-wpt-type="option" data-wpt-id="cred_form_95_0_cred_form_95_0-select-5-1490504521" data-wpt-name="type-d-objet[]">Argenteries</option>

And for a child :
<option value="132" data-parent="15" class="wpt-form-option form-option" data-wpt-type="option" data-wpt-id="cred_form_95_0_cred_form_95_0-select-5-1490504521" data-wpt-name="type-d-objet[]">  Couverts</option>

The only difference between a parent and a child is the data-parent attribute where the value is always -1 for a parent.
Is there a way to use it to give a different style to the parents listed in the select field?

Regards
Pat

#505919

Hi Pat there is no way to apply classes to each individual option depending on whether it is a parent or child term. CSS has an attribute selector you may be able to utilize:
versteckter Link

#505933

Pat

Hi Christian,
Sounds good.
Many thanks for the tip.
Regards
Pat