[Resolved] Style Taxonomies Checkbox in Cred (toolset forms)

[Author]

Posts

[Nashaat]

I am trying to style the checkboxes of an individual taxonomy field but no sucess.

I have styled the global checkbox in this form but what i want is to change the style only for this taxonomy field with different colors and different style than all. I tried adding classes for this field but it seems it doesnt help...

You can login here to see the form:
Now the fields are white so you wont see them until you hover next to the options.

What is the best way to style it individually?
Would be greet to send me a clear example how this should look like!
Thanks

[Nigel]

It looks like you have already added a style rule with the following selector to change the appearance of all checkboxes in the form:

.cred-form input[type="checkbox"].checkbox

You just need to add a more precise selector to override those general settings.

In my screenshot there is an individual checkbox highlighted which is inside a li with class tax-deal-type-102, so I could target that individual checkbox with a selector such as

.cred-form .tax-deal-type-103 input[type="checkbox"].checkbox

If you want to target a particular taxonomy then you can add a class to the wrapper DIV in your form, so in the example below I add a class of "tax-statuses".

	<div class="form-group tax-statuses">
		<label>Statuses</label>
		[cred_field field='status' display='checkbox' output='bootstrap']
		[cred_field field='status_add_new' taxonomy='status' type='add_new']
	</div>

I can then target each checkbox for that taxonomy with:

.cred-form .tax-statuses input[type="checkbox"].checkbox

[Nashaat]

Thank you Nigel. you helped me understand more for now and for the future!

i have used this as your suggestion

  <div class="col-md-12 columns-design deal-taxo">
    <label class="label-style">Deal Type</label>
		[cred_field field='deal-type' display='checkbox' output='bootstrap']
  </div>

CSS

.cred-form .deal-taxo input[type="checkbox"].checkbox {
  outline: solid 3px #dddddd;
}