Customizing my checkboxes

Anonymous

#186558

Hello!
First of all, thanks you for this plugin: it’s quite what I needed.

I would like to customize the appearance of checkboxes, so that those on this page look like those of this one.

I imagine this is a small setting to make in the style.css file, but I can not find which one. Could you give me a hand?

If it helps, I use this theme and here is my css code:

.searchandfilter ul {
	padding: 0px;
	-webkit-columns: 200px 3;
	-moz-columns: 200px 3;
	columns: 200px 3;
	text-align: right;
	column-gap: 40px;
}

.searchandfilter > ul > li {
	padding: 2px 0;
}

.searchandfilter .checkboxes {
    position: relative;
    padding-left: 30px;
    margin-bottom: 5px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.searchandfilter .checkboxes input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.searchandfilter .checkmark {
    position: absolute;
    top: 4px;
    left: 2px;
    height: 16px;
    width: 16px;
    background-color: #eee;
    border-radius: 4px;
}

.searchandfilter .checkboxes:hover input ~ .checkmark {
    background-color: #f8f8f8;
}

.searchandfilter .checkboxes input:checked ~ .checkmark {
    background-color: transparent;
}

.searchandfilter .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.searchandfilter .checkboxes input:checked ~ .checkmark:after {
    display: block;
}

.searchandfilter .checkboxes .checkmark:after {
    left: 5px;
    top: -3px;
    width: 9px;
    height: 17px;
    border: solid #5EB28F;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.searchandfilter .count {
    font-weight: normal;
    font-size: smaller;
    color: #888888;
}

And:

<div class="searchandfilter">
<ul><li><label class="checkboxes">One <span class="count">(1)</span><input type="checkbox" checked="checked"><span class="checkmark"></span></label></li>
<li><label class="checkboxes">Two <span class="count">(2)</span><input type="checkbox"><span class="checkmark"></span></label></li>
<li><label class="checkboxes">Three <span class="count">(3)</span><input type="checkbox"><span class="checkmark"></span></label></li>
<li><label class="checkboxes">Four <span class="count">(4)</span><input type="checkbox"><span class="checkmark"></span></label></li>
<li><label class="checkboxes">Five <span class="count">(5)</span><input type="checkbox"><span class="checkmark"></span></label></li>
<li><label class="checkboxes">Six <span class="count">(6)</span><input type="checkbox"><span class="checkmark"></span></label></li>
<li><label class="checkboxes">Seven <span class="count">(7)</span><input type="checkbox"><span class="checkmark"></span></label></li>
<li><label class="checkboxes">Eight <span class="count">(8)</span><input type="checkbox"><span class="checkmark"></span></label></li>
<li><label class="checkboxes">Nine <span class="count">(9)</span><input type="checkbox"><span class="checkmark"></span></label></li>
<li><label class="checkboxes">Ten <span class="count">(10)</span><input type="checkbox"><span class="checkmark"></span></label></li>
<li><label class="checkboxes">Eleven <span class="count">(11)</span><input type="checkbox"><span class="checkmark"></span></label></li>
<li><label class="checkboxes">Twelve <span class="count">(12)</span><input type="checkbox"><span class="checkmark"></span></label></li>
<li><label class="checkboxes">Thirteen <span class="count">(13)</span><input type="checkbox"><span class="checkmark"></span></label></li>
<li><label class="checkboxes">Fourteen <span class="count">(14)</span><input type="checkbox"><span class="checkmark"></span></label></li>
<li><label class="checkboxes">Fifteen <span class="count">(15)</span><input type="checkbox"><span class="checkmark"></span></label></li>
</ul>
</div>

Thanks!

Trevor

#186563

Hi

It is a little complex, but this will give you the idea:

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

Anonymous

#186816

Thank you for your answer.
It works well when checkboxes are checked… but they are not visible otherwise. I guess it’s a matter of a few more css lines, but my attempts failed.

Could you help me?

Trevor

#186824

What do you want to show when NOT checked? I could do an empty black square? or a red X?

Anonymous

#186832

A gray square, as on this page.
Here is my code:

.test-checkboxes .checkmark {
    position: absolute;
    top: 4px;
    left: 2px;
    height: 16px;
    width: 16px;
    background-color: #eee;
    border-radius: 4px;
    cursor: pointer;
}

.test-checkboxes .checkboxes:hover input ~ .checkmark {
    background-color: #f8f8f8;
}

Trevor

#186836

I do not see any gray squares on that page? Not in Firefox or Chrome.

Anonymous

#186857

this is what it should look like:

The thing works for me, on 2 computers, in Firefox and Chromium.

Trevor

#186865

I am not understanding. You want a green tick if on, and a gray square if off, but that screenshot you sent me has no gray squares?

Anonymous

#186869

Maybe the gray squares are too light (#eee). I made them red now:

The green tick is ok. I would like the unchecked boxes to be gray/red on this page.

Trevor

#186912

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

[Author]

Posts