Programmer Programmer - 4 months ago 6
HTML Question

Completely frustrated. Works in JSFiddle but not locally

I am designing my website and I wanted to use "+" selector in css.

This is HTML code:

<input type="checkbox" name="subject" value="matematika">
<label>Matematika</label>`


This is CSS code:

input[type="checkbox"] + label {
clear: both;
text-align: right;
font-weight: normal;
font-size: 15px;
vertical-align: bottom;
user-select: none;
-webkit-user-select: none;
padding-left: 10px;
color: red;
}


And this is JSFiddle: https://jsfiddle.net/z8ptpznp/

It works on fiddle but not on my pc somehow...

Please help I really don't know what to do anymore.

Thank you

EDIT 2:

Removed the code as this is a private project. Thank You all!

Answer

I would suggest that you wrap the text inside of your <label> with a <span> so that you can style that.

The HTML would look like:

<label class="label">
    <input class="label__input" type="checkbox" name="subject" value="nemščina">
    <span class="label__text">Nemščina</span>
</label>

And then your CSS would look like:

.label .label__input:checked + .label__text {
    color: #F00;
    /** other styles here **/
}

Here's a working Fiddle: https://jsfiddle.net/95xsu00h/1/

Comments