1
I’m using some stylized checks to mark some product sizes on a filter, seeing by Chrome inspection the checks are there when clicking the filter is performed, but in the normal view I couldn’t leave the checks as marked, I don’t know where I might be missing.
In this image the checks are stylized but I can’t mark any and the filter is not triggered.
In this other image, by the inspector, I can see the checks and if mark the filter is performed.
The site can be seen here:
1
I ran a simulation here trying to make the most of your code. However you need to make some moderate changes to your HTML structure and I don’t know if this would be appropriate at this stage of the project...
First you who to select the checkbox by clicking on some element this element must be a <label> with the attribute for="idDoCheckbox" and you have to pass the CSS styles of <li> for this label within the <a>, in addition to the checkbox should come before the <a>
To better understand see the example below.
.sidepanel {
margin: 0 0 10px;
padding: 14px 18px 7px;
border: 2px solid #ccc;
}
.widget_sized ul {
padding-bottom: 13px;
}
.widget_sized li {
display: inline-block;
vertical-align: top;
}
.widget_sized a label {
box-sizing: border-box;
width: 40px;
height: 30px;
display: block;
text-transform: uppercase;
text-align: center;
line-height: 28px;
font-size: 11px;
font-weight: bold;
color: #666;
border: 1px solid #e9e9e9;
transition: border 0.3s ease-in-out;
-webkit-transition: border 0.3s ease-in-out;
cursor: pointer;
}
.widget_sized a label:hover {
color: #333;
border: 1px solid black;
}
.widget_sized input[type="checkbox"]:checked + a > label {
border: 1px solid black;
}
.widget_sized input[type="checkbox"] {
display: none;
}
.widget_sized a {
text-decoration: none;
}<div class="sidepanel widget_sized product-data">
<ul>
<li>
<input type="checkbox" id="id1" class="item_filter size" value="10">
<a href="javascript:void(0);" class="sizeXS" .="">
<label for="id1">46</label>
</a>
</li>
<li>
<input type="checkbox" id="id2" class="item_filter size" value="10">
<a href="javascript:void(0);" class="sizeXS" .="">
<label for="id2">48</label>
</a>
</li>
</ul>
</div>Hello Hugo, this <label for="id2"> needs to be dynamic?
Not necessarily... but you can only have one for="" for a single id="", so if you have 10 inputs you need 10 different ids and 10 different Abels with one for= the corresponding ID. Here is some material about the Ids that you might be interested in https://answall.com/questions/318255/por-que-é-considerado-errado-ruim-repetir-uma-id-em-html/ and if you have any more questions, just ring
Hello Hugo, now it’s simple thing, how can I leave the lines, both when I pass the mouse and when I select equal, I changed and it didn’t work, like, thinner.
@adventistapr You wanted to leave the line only selected thinner is this? Here in the answer I have already edited and put with 1px. But then in your project see if you didn’t leave any CSS behind by overwriting this style. Or put ! importatnt in border attribute last case... But in 30 min I’ll be home, I’ll give a refined in this CSS, because I got it straight from the link you posted in the question. There must be some redundant CSS in there messing up what you want to do.
@adventistapr guy gave a formatted in answer CSS styles and left only the essential. Something else! I took a look there at your link site, and noticed that you still have part of the old CSS running in parallel with that of the answer. Even the LI still has the edge, I think that’s the edge you want to remove .widget_sized li:hover, .widget_sized li.active { border: 2px solid #333; }
I wonder if I can change my mind on chat, quick thing, but I don’t know how to do it
Call it in, only I only have 15 minutes to help you because my fiancée is arriving in the area... But ask there that as far as possible I will answer you
Let’s go continue this discussion in chat.
Browser other questions tagged css
You are not signed in. Login or sign up in order to post.
that image was troll, huh.. my boss got up to see which site I’m accessing =D
– rLinhares
My wife came here to complain that now she has a wife naked in my "little game" :/
– hugocsl
Sorry guys, I didn’t even touch the picture.
– adventistapr
And state "checked" would be the outline Black around the element?
– hugocsl
Hello @Leocaracciolo, see in the second image, I unchecked the input display:None.
– adventistapr
hahaha, you put a woman like that and you want someone to see checkboxes?
– user60252
Okay, "problem" photo solved.
– adventistapr
That would be @hugocsl, being able to select more than one check, but I could not.
– adventistapr
I had to go in the history of the issues to see rss...
– Sam
I think you’ll have to do it via JS. It serves?
– Sam
With CSS I only see one way, and you have to take the checkbox from inside A, and pass the effect from LI to A, so you do in css input:checked+a and put the class
– hugocsl
Hello @sam, not even so I could, will be very welcome.
– adventistapr