0

I have two custom styled radio buttons, and am trying to highlight a border of the one that is focused, but since I have styled them with :before and :after I can't seem to get the :focus target right.

Here's a jsFiddle https://jsfiddle.net/o5htfhdm/2/ The desired effect is that when a radio button is clicked(focused) its border is blue, but as soon as the user clicks somewhere else, for example in to the text input below the border will go back to black

The change the color of the radio button border we need only 

input[type="radio"]:after{
    border-color: #000; 
}

So now what I am trying to do is

input[type="radio"]:focus > input[type="radio"]:after{
    border-color: blue;
}

But that doesn't work

Cream Whipped Airplane
  • 1,305
  • 3
  • 13
  • 31
  • @Paulie_D This is definitely a duplicate of that question, as I was able to style the radio buttons with :before and :after, I am just trying to add extra functionality – Cream Whipped Airplane Mar 10 '16 at 14:55
  • It's at the top....Have you checked this is Firefox...it doesn't work **at all**. `input` elements aren't supposed to support pseudo-elements, Chrome is odd in that respect. – Paulie_D Mar 10 '16 at 14:57
  • @Paulie_D, well I don't mind it has the default look in Firefox, that can't stop me from changing the look of it for the more fortunate users of Chrome – Cream Whipped Airplane Mar 10 '16 at 14:58
  • Even if it did work it would be something like `input[type="radio"]:focus:after` – Paulie_D Mar 10 '16 at 14:58
  • `input[type="radio"]:after{ border-color: red !important; }` works, but `input[type="radio"]:focus:after{ border-color: red !important; }` doesnt – Cream Whipped Airplane Mar 10 '16 at 15:01
  • You sure? - https://jsfiddle.net/me0j4wqp/ – Paulie_D Mar 10 '16 at 15:03
  • @Paulie_D wow ok, so this is so broken :D It works in chrome, changes the border color to red, but not in Safari, even though in Safari the radio buttons are still properly styled with :after and :before. – Cream Whipped Airplane Mar 10 '16 at 15:11
  • That's why using a pseudo-element isn't recommended here. Use a `label` and, if necessary, pseudo-elements on **that**. – Paulie_D Mar 10 '16 at 15:12
  • @Paulie_D I was kinda ripping of what bootstrap does, didn't realize they didn't cover their ass in Firefox.. Even the demo doesn't work there http://bootswatch.com/paper/ :( – Cream Whipped Airplane Mar 10 '16 at 15:18

0 Answers0