How to CSS style price set checkbox?

Question

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;}

Answer 1

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