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;}
  • 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 '20 at 21:53
  • Perfect!! thanks – Tapash Mar 4 '20 at 22:06

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, privacy policy and cookie policy

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