1

All the answers in How to style checkbox using CSS? rely on the :checked pseudo-class selector. Since this selector is not supported by about half of the mobile browsers, those are currently not useful answers.

So how can you style a checkbox or radio button with CSS (no JS!) without the :checked pseudo-class selector?

Community
  • 1
  • 1
  • Wasn't this question answered in the 'Older Answer' section of the accepted answer for [How to style checkbox using CSS?](http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css) – Joe Apr 28 '14 at 08:51
  • @Joe The first old answer doesn't work in most browsers, the second uses JS. Or did I overlook something? –  Apr 28 '14 at 09:03
  • The point of that answer is that there is no cross-browser method for styling the box. The :checked pseudo-class makes some stride in that direction, but even it is not universally supported. Your only sure-fire method will be to use some javascript. – Joe Apr 28 '14 at 15:10

1 Answers1

1

http://jsbin.com/rahuq/1/

input[type=checkbox]:checked{
  outline: 2px solid red;
}

Tested in Android 2.3 and 4.3 and worked pretty well :)

If you really want to style it you can do like:
http://jsbin.com/mikul/1/

<input id="ch1" type="checkbox"><label for="ch1"></label>


input[id^=ch]{
  display:none;
}
input[id^=ch] + label{
  display:inline-block;
  width:16px;
  height:16px;
  background:green;
  border-radius:50%;
}
input[id^=ch]:checked + label{
  background: red;
}

Also tested in Android 2.3 and 4.3
Also tested in Firefox Mobile browser and works
Also tested in Chrome Mobile and native browsers

Upload by Roko

enter image description here enter image description here

Edit by @what:

Here's a screenshot from Firefox for Android that shows that this does not work in that browser: Upload by @what

enter image description here

Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
  • @what looks like I'm the only one doing tests here. It works. – Roko C. Buljan Apr 28 '14 at 09:17
  • @what I have samsung galaxy S3 and it works bro, even on HTC Desire – Roko C. Buljan Apr 28 '14 at 09:23
  • It works in Android default browser, but it does **not** work on Firefox for Andorid (28.0.1) on my Samsung Galaxy S III –  Apr 28 '14 at 09:28
  • @what I have also 28.0.1 and works perfectly. Strange. Tap harder it changes color – Roko C. Buljan Apr 28 '14 at 09:29
  • I posted a screenshot as an edit to your post. Accept or delete as you wish. I *did* tap hard ;-) –  Apr 28 '14 at 09:33
  • +1 for trying to help me, Roko, but I feel I don't want to trust this selector. –  Apr 28 '14 at 09:39
  • @what do as you like, I attached my screenshots. – Roko C. Buljan Apr 28 '14 at 09:43
  • @what maybe you should check browser settings. because it is working fine for roko. – Mr_Green Apr 28 '14 at 10:03
  • Yes, @Mr_Green, I see (and I believed him even without the screenshots). But I don't know what kind of browser setting would cause this behavior. I use FF as I installed it, and I'm sure most users don't change those settings either, so quite obviously **this solution cannot be relied on**. I cannot ask my users to check their browser settings, that is not a viable design solution. Also we are only talking about FF here. PPK lists several other browsers. Do they also work for you? –  Apr 28 '14 at 10:12