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.

[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.

[Trevor]

This forum search will give you some example snippets:

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

[Anonymous]

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;
}

[Anonymous]

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;

[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;
}

[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;
}

[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%;
}

[Trevor]

One thing that I think it needs is this:

.searchandfilter[data-sf-form-id="5236"] li.sf-field-taxonomy-product_cat > ul > li label:hover {
  cursor: pointer;
}

So, to your question. This:

.searchandfilter[data-sf-form-id="5236"] li.sf-field-taxonomy-product_cat .sf-input-checkbox:checked + .sf-label-checkbox {
color: #fff;
background: #960E12
}

Needs to be:

.searchandfilter[data-sf-form-id="5236"] li.sf-field-taxonomy-product_cat .sf-input-checkbox:checked + .sf-label-checkbox {
color: #fff;
background: #960E12;
line-height: 26px;
}

[Trevor]

Is this more like you want?

.searchandfilter input.sf-input-checkbox[type=checkbox] + .sf-label-checkbox:before {
	content:"";
	display:inline-block;
	top: -3px;
	width: 0px;
	height: 0px;
	margin: 0 8px 0 -5px;
	cursor: pointer;
	border: 8px solid red;
	border-radius: 3px;
	top: 2px;
	position: relative;
}
.searchandfilter input.sf-input-checkbox[type=checkbox]:checked + .sf-label-checkbox:before {
	top: 0;
	margin: 0 10px -2px 0;
	width: 9px;
	height: 17px;
	border: solid #5EB28F;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	cursor: pointer;
	border-radius: 0;
}
.searchandfilter input.sf-input-checkbox {
  display: none;
}