Answers.Body: <p>Adding as an answer for future references</p>
  
  <pre><code> #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%;}
  </code></pre>
  
  <p>UPDATE: More comprehensive styling</p>
  
  <p><a href="https://civicrm.stackexchange.com/questions/27721/styling-contribution-pages-with-buttons/27722#27722">Styling Contribution pages with buttons</a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-03-04T23:33:41.973Z
Answers.LastActivityDate: 2020-03-19T15:45:34.273Z
Answers.LastEditDate: 2020-03-19T15:45:34.273Z
Answers.UserDisplayName: Tapash
Body: <p>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</p>
  
  <pre><code>#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;}
  </code></pre>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-03-04T21:53:24.070Z
Comments.Text: 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.
Comments.UserDisplayName: Demerit
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-03-04T22:06:18.213Z
Comments.Text: Perfect!! thanks
Comments.UserDisplayName: Tapash
Tags: <css>
Title: How to CSS style price set checkbox?
ThreadText: # How to CSS style price set checkbox?
  
  (Asked by: username_0 on 2020-03-04)
  
  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;}
  
  ```
  
  **Tags:** css
  
  > **Comments:**
  > **username_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.  
  > **username_0**: Perfect!! thanks  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2020-03-04. Score: 2 | Accepted answer
  
  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](https://civicrm.stackexchange.com/questions/27721/styling-contribution-pages-with-buttons/27722#27722)
  
  
  ---
  
  