Search Results for '.searchandfilter checkbox sf-input-checkbox sf-label-checkbox'

[Trevor]

To remove the red lined items, you need this custom CSS:

.searchandfilter[data-sf-form-id="4548"] .sf-field-taxonomy-product_category .sf-level-0 > .sf-input-checkbox,
.searchandfilter[data-sf-form-id="4548"] .sf-field-taxonomy-product_category .sf-level-0 > .sf-label-checkbox {
    display: none;
}
.searchandfilter[data-sf-form-id="4548"] ul li.sf-field-taxonomy-product_category > ul > li {
    padding: 0;
}

As to the remove empty fields, I have no solution for that sorry. It may be something we will add in V3 (not due for some months yet), I am not sure.

It might be possible to do this with custom JavaScript, that checks if the field is empty, but I do not know how that would be done and have no snippets to share.

Add New Note to this Reply

[Cristina Morbidoni]

This reply has been marked as private.

Add New Note to this Reply

[Trevor]

It would be possible, but using some very custom CSS, I am unsure whether the ticks and crosses can be done.

This forum search will give you some example snippets:

https://support.searchandfilter.com/forums/search/.searchandfilter+checkbox+sf-input-checkbox+sf-label-checkbox/

You may need to employ the services of a third party coder to help you. If you get close, feel free to come back, show me what you have made, and let me look at it for you.

Add New Note to this Reply

[Trevor]

This forum search will give you some example snippets:

https://support.searchandfilter.com/forums/search/.searchandfilter+checkbox+sf-input-checkbox+sf-label-checkbox/

Add New Note to this Reply

[Cecilia Arditto]

OK! Understood. I will keep the current design with the blocks. It looks very nice too. I adjusted the margins of the check mark. It works perfect.
Thanks a lot for your guidance! Have a nice weekend!

This is the final result:

.searchandfilter input.sf-input-checkbox[type=checkbox] + .sf-label-checkbox:before {
content:””;
display:inline-block;
top: -3px;
width: 12px;
height: 12px;
margin-right: 10px;
border: 1px solid #b4b4b4;
border-radius: 3px;
}

.searchandfilter input.sf-input-checkbox[type=checkbox]:checked + .sf-label-checkbox:before {
margin: -3px 10px 2px 3px;
width: 5px;
height: 9px;
border: solid #000;
border-width: 0 1px 1px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
cursor: pointer;
border-radius: 0;
}

.searchandfilter input.sf-input-checkbox {
display: none;
}

Add New Note to this Reply

[Cecilia Arditto]

Thanks a lot Trevor! Your solution works very well. There is no way to change the CSS, but to design the checkbox again. I still need some css help.
I´ve been able to add my own checkbox (as similar as the default one I could, but without the blue) and I hided the old one but keeping its function (that works great!). I designed the check mark I want but when “checked” I can not make the check mark and the box display together (i see one or the other). Any tip?
Have a good day!

.searchandfilter input.sf-input-checkbox[type=checkbox] + .sf-label-checkbox:before {
  content:"";
  display:inline-block;
  top: -3px;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  border: 1px solid #b4b4b4;
  border-radius: 3px;
}

.searchandfilter input.sf-input-checkbox[type=checkbox]:checked + .sf-label-checkbox:before {
display:inline-block;
  top: -3px;
  width: 12px;
  height: 12px;
  margin-right: 10px;
  border: 1px solid #b4b4b4;
  border-radius: 3px;
}
	
.searchandfilter input.sf-input-checkbox {
  display: none;
}

AND HERE THE CHECKMARK I WANT (as similar as default as i could)

margin: -3px 10px 0px 3px;
width: 5px;
height: 9px;
border: solid #000;
border-width: 0 1px 1px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
cursor: pointer;
border-radius: 0;

Add New Note to this Reply

[Trevor]

This CSS should get you started:

.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical input {
  display: none;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical label {
  text-align: center;
  width: 2.2em;
  line-height: 1.4em;
  border: 2px solid #666;
  padding: 3px;
  text-indent: 0;
  border-radius: 5px;
}
.searchandfilter[data-sf-form-id="1052"] ul {
  padding-left: 0;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical > ul > li {
  display: inline-block;
  margin-right: 10px;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical {
  display: block;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical label:hover {
  cursor: pointer;
}
.searchandfilter[data-sf-form-id="1052"] .sf-input-checkbox:checked + .sf-label-checkbox {
  color: #fff;
  background: #666;
}

Add New Note to this Reply

[Trevor]

This reply has been marked as private.

Add New Note to this Reply

[Trevor]

I think this works?

.searchandfilter > ul > li[data-sf-field-input-type="checkbox"] li input.sf-input-checkbox {
  position: absolute;
  margin-top: 8px;
  width: 13px;
}
.searchandfilter > ul > li[data-sf-field-input-type="checkbox"] li label.sf-label-checkbox {
  padding-left: 24px;
}

Add New Note to this Reply

[Trevor]

Does his custom CSS help?

.searchandfilter[data-sf-form-id="66179"] ul {
  padding-left: 0
}
.searchandfilter[data-sf-form-id="66179"] .sf-input-checkbox {
  height: 16px;
  width: 16px;
}
.searchandfilter[data-sf-form-id="66179"] li .sf-label-checkbox {
  vertical-align: text-top;
}
.searchandfilter[data-sf-form-id="66179"] li[data-sf-field-input-type="select"],
.searchandfilter[data-sf-form-id="66179"] li[data-sf-field-input-type="select"] label {
  min-width: 100%;
}

Add New Note to this Reply