[Closed] Styling search buttons independently

[Author]

Posts

[matthiasP-2]

Hello Christian,

first of all, thank you very much for helping me with my glossary page. It works really well now.

I also have a similar problem with another toolset based page im currently working on. It is a specific a doctors study search site where you can sort the different studys shown with buttons. The studys are sorted by color and so should be the buttons.

Heres another video where you can see how the site already works: hidden link

I created the view with the wordpress block editor and you can see that I was able to customize the search results close to the original design. But I came upon a lot of problems customizing the search buttons in a way that is close to my original design. The different "organ" buttons (Magen, Darm, etc.) are all summarized under one css class, so I cant customize each button individually.

Is there a way to assign each button an individual css class? Or do you know some other way to fix this problem?

I hope you can also help me with this question, your last advise helped me a lot!
David

[Christian Cox]

Is there a way to assign each button an individual css class? Or do you know some other way to fix this problem?
When you say "buttons", are you referring to the checkbox inputs, or something else? You can use CSS class and attribute selectors to target individual checkbox inputs based on their name and value. This code shows how you would target each Organ checkbox by class, name and value together. I'm attaching a screenshot to show where you can find this information in the browser inspector.

.form-check-input[name="wpv-wpcf-organ[]"][value="1"] {
  /* your CSS for the organ checkbox with value=1 */ 
    height: 50px;
    width:50px;
    box-shadow: 0px 0px 20px lime;
}
.form-check-input[name="wpv-wpcf-organ[]"][value="2"] {
  /* your CSS for the organ checkbox with value=2 */ 
}
.form-check-input[name="wpv-wpcf-organ[]"][value="3"] {
  /* your CSS for the organ checkbox with value=3 */ 
}

https://stackoverflow.com/questions/12340737/specify-multiple-attribute-selectors-in-css