Programmer Programmer - 1 year ago 63
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">

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:

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

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

Thank you


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

Answer Source

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>

And then your CSS would look like:

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

Here's a working Fiddle:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download