Thursday, February 12, 2026 | Good evening!

FlyingWPress

Bricks Checkbox Filters

Bricks Checkbox Filters

November 26, 2024

I used a few lines of CSS to help style the checkbox filter in Bricks Builder. I am not convinced this is the best way (yet), but it works. I used this on a site with great success.

%root% {
  --measurement: 1.25em;
}
%root% {
  display: flex;
  flex-direction: column;
  gap: 1em;
  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;
}

Here are the before and after results

No styles applied

Adding the styling provides a cleaner look, in my opinion.

With the CSS applied

1 comment

  • Perfect… really helped me out.

    I also added the following to get colour on the checkbox.

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

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

Leave a Reply to AdamCancel reply

Featured