Opens in a new tab

Styling Checkboxes in Bricks

Need to style your checkboxes so they are not the standard blue colour and tiny shape? Try this CSS on the filter element for Checkboxes:

input[type=checkbox]{
  accent-color: var(--primary); 
  }

@supports (accent-color: #fff) {
  .info {
    display: none;
  }
}

%root% {
  --measurement: 1.2em;
}
%root% {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  justify-content: start;
}
%root% .brx-option-text {
  line-height: var(--measurement);
  display: flex;
}
%root% input {
  display: flex;
  width: var(--measurement);
  height: var(--measurement);
}
%root% li label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
}