1

I need help styling my priceset checkboxes on a contribution pages. I was able to style it, but when any of them are selected, the checked item doesn't show activated as per my css color. It maybe a simpletest thing for some, but I would very much appreciate if anyone can help please. Here's my CSS so far

#crm-container.crm-public .price-set-row .crm-price-amount-label {display: inline;}
#crm-container.crm-public .price-set-row {display:inline-block;border:1px solid #e0e0e0;width:48%;}
#crm-container.crm-public .price-set-row label {display: inline-block;}

#crm-container.crm-public .price-set-row:hover,
#crm-container.crm-public .price-set-row.selected,
#crm-container.crm-public .price-set-row:checked {background-color: #FFC107; color: #FFF;font-weight:700;}
2
  • 1
    I don't think you can select/check a "row". You'd need to target the input element inside the row. You might need javascript to do what you're trying to do.
    – Demerit
    Mar 4, 2020 at 21:53
  • Perfect!! thanks
    – Tapash
    Mar 4, 2020 at 22:06

1 Answer 1

2

Adding as an answer for future references

 #crm-container.crm-public .price-set-row input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
#crm-container.crm-public .price-set-row input.crm-form-checkbox + label{display: inline-block;text-align:left; padding: 8px 8px; 
  cursor: pointer;border: 1px solid #e0e0e0;width: -webkit-fill-available; margin-left: 0;}

#crm-container.crm-public .price-set-row input.crm-form-checkbox + label:hover,
#crm-container.crm-public .price-set-row input.crm-form-checkbox + label.selected,
#crm-container.crm-public .price-set-row input.crm-form-checkbox:checked + label {background-color: #FFC107; color: #FFF;}
#crm-container.crm-public .price-set-row input.crm-form-checkbox:after {content: "";display: table;clear: both;}

#crm-container.crm-public .price-set-row .crm-price-amount-label {display: inline;}
#crm-container.crm-public .price-set-row {display: inline-block;width:49%;}

UPDATE: More comprehensive styling

Styling Contribution pages with buttons

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.