CSS filters

Anonymous

#214130

Good afternoon
I’m trying to assign a CSS to my filters. I’m having a problem that may be a problem but I can not find the solution:

/* Filter Test */

input[type=”checkbox”] {
display: none;
}
input[type=”checkbox”]:checked {
background: rgb(255, 102, 0);
border-color: rgb(255, 102, 0);
}
input[type=”checkbox”]:checked {
transform: scale(1.3);
}

.sf-input-checkbox {
display: block;
box-sizing: border-box;
width: 25px;
height: 25px;
background: #CCC;
margin: 100px;
border: 3px solid #7A7A7A;
border-radius: 45%;
position: relative;
cursor: pointer;
transition: .2s;
}
.sf-input-checkbox :before {
content: ”;
position: absolute;
display: block;
height: 300%;
width: 300%;
top: -100%;
left: -100%;
z-index: -1;
border-radius: 50%;
transition: .3s;
}
.sf-input-checkbox :after {
content: ”;
display: block;
height: 100%;
width: 100%;
background: url(“https://www.ert.pt/wp-content/uploads/2019/05/Check.svg”) center center no-repeat;
background-size: contain;
transform: scale(0);
transition: .2s;
}
.sf-input-checkbox :active:before {
background: #bfbfbf;
}

In the CSS below, the checkbox and label have the same properties, when I assign PADDING or MARGING (left) on the label to move away from the checkbox, the checkbox also gains padding and “grows” horizontally next to the label.

It may be necessary to assign a class to the checkbox, but I can not finish this.

Thanks for the help.
Thanks.

Anonymous

#214131

This reply has been marked as private.

Trevor

#214135

I do not see that CSS active on the page? How did you try to add it?

Anonymous

#214153

This reply has been marked as private.

Trevor

#214157

This reply has been marked as private.

Anonymous

#214161

This reply has been marked as private.

Trevor

#214163

Ah yes, I see it now. Do you have an image of what it SHOULD look like?

Anonymous

#214165

This reply has been marked as private.

Trevor

#214169

This reply has been marked as private.

Anonymous

#214171

This reply has been marked as private.

[Author]

Posts