checkboxes as buttons

Anonymous

#245022

Hello Trevor,

is there a way to get the checkboxes / multi select as buttons?

I’m using post meta with “choice” as search field. The field has a couple of values and I like to have buttons to select the vaule within the search form. It should work with check boxes and multi-select.

Robert

Trevor

#245067

Are you able to send me a live link/URL to your search page so I can take a look?

You want the checkboxes hidden, and instead the labels to act as buttons (rather as a tag cloud works)? The buttons would change color maybe to show that they are selected?

Anonymous

#245101

Hello Trevor,

thanks for getting back to me so quickly! I have a first search form in my test environment: https://staging.servicemanagement.tools/test-suche/

It should look like this: https://www.screenpresso.com/=ceute

Robert

Anonymous

#245112

Maybe I should point out that I started with a small bit of styling:

.searchandfilter ul li {
    display: inline;
}
.searchandfilter li[data-sf-field-input-type=checkbox] label, .searchandfilter li[data-sf-field-input-type=radio] label, .searchandfilter li[data-sf-field-input-type=range-radio] label, .searchandfilter li[data-sf-field-input-type=range-checkbox] label {
    padding-left: 5px;
    padding-right: 20px;
}

Trevor

#245172

This will give you some ideas I think:

.searchandfilter[data-sf-form-id="6198"] select.sf-input-range-select {
  border: 1px solid #aaa;
  padding: 2px 0;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort input {
  display: none;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort label {
  text-align: center;
  line-height: 1.4em;
  border: 1px solid #666;
  border-radius: 3px;
  padding: 3px 5px !important;
  text-indent: 0;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort label:hover {
  cursor: pointer;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort > ul > li {
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 10px;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort > ul {
  margin-left: -5px;
}
.searchandfilter[data-sf-form-id="6198"] .sf-field-post-meta-cloud-standort > ul > li.sf-option-active label {
  background-color: #7DA85B;
  color: #fff;
}

Anonymous

#245218

Hey Trevor,

that’s amazing! Thank you very much. I can start from this point over!

Robert

Trevor

#245226

Thanks for letting me know. I will close this thread for now.

[Author]

Posts