3

It almost works, except on the checked state, I can't change the label color.

input[type="checkbox"].custom:checked label {
    color: #fff;    
}

http://jsbin.com/vupow/1/

eozzy
  • 66,048
  • 104
  • 272
  • 428
  • I hadn't seen the use of the pseudo-elements originally (since they're not mentioned or highlighted in your question), the use of those pseudo-elements makes it somewhat similar (though I'm not sure if it's a dupe) of my own question: http://stackoverflow.com/questions/17219286/why-does-the-general-sibling-combinator-allow-toggling-pseudo-elements-content – David Thomas Apr 20 '14 at 19:41
  • Your markup is [not valid](http://validator.w3.org/). – PointedEars Apr 20 '14 at 20:08

1 Answers1

2
  1. Remove the :before selector
  2. You can also just merge the two css entries into one

.

input[type="checkbox"].custom:checked + label {
background: #1c6db5;
color: #ffffff; 
}

jsBin

John
  • 218
  • 2
  • 10
  • Updated the answer with new jsbin. – John Apr 20 '14 at 20:04
  • I made some more edits to the jsbin, removing all of the :before selectors. The old one changes a square background swatch, the color bleeds out around the rounded corners. That's because the element that has the rounded corners (your :Before item) and the one that has the background change (the label itself) are different. – John Apr 20 '14 at 20:08
  • 1
    @John The `input` element start-tag is closed, but the DOCTYPE declaration is missing, which is why the W3C Validator complains about the STAGO. This is not the only syntax error here. – PointedEars Apr 20 '14 at 20:10
  • @PointedEars Do you mean the jsbin in the question has a closed `input` tag? I thought you needed either `` or `` which I didn't see. Curious if I missed something. Seemed like adding the closed tag fixed it for @Nimbuz. – John Apr 20 '14 at 20:16
  • 1
    @John You must/need not do that in *HTML*. Very doubtful that the NETC fixed anything. – PointedEars Apr 20 '14 at 20:20
  • @PointedEars Interesting, I didn't know that, thanks! Apparently `` is flat out wrong, but `` is correct for xhtml, but not necessary for html. According to [this answer](http://stackoverflow.com/questions/13232121/closing-html-input-tag-issue) anyway. Also I have no idea what STAGO or NETC stands for, and google doesn't seem to help. – John Apr 20 '14 at 20:25
  • 1
    @John You’re welcome. `` *is* wrong as the *content model* of `input` is `EMPTY`. STAGO: Start-Tag Open delimiter (here: `<`). NE(S)TC: [NET-enabling (Start-)Tag Close delimiter](http://www.is-thought.co.uk/book/sgml-9.htm). `` was [allowed in HTML < 5](http://www.w3.org/TR/1999/REC-html401-19991224/sgml/sgmldecl.html), but had a formal meaning that was [not well supported](http://www.w3.org/TR/1999/REC-html401-19991224/appendix/notes.html#h-B.3.3) (`>`); HTML5 [changed that](http://www.w3.org/TR/2014/CR-html5-20140204/syntax.html#tag-open-state): “ignore the `/`”. – PointedEars Apr 20 '14 at 20:48