0

How can I change the border-color of a radio button in Chrome & Firefox using only CSS? I've added the following to my css file and it doesn't change the appearance from the browser default settings.

input[type="radio"] {
    border: 1px solid $ltbrown;
  }

I've also tried "outline" instead of border, but that creates a square border around the default circular border.

Aziz
  • 20,065
  • 8
  • 63
  • 69
dagarre
  • 684
  • 1
  • 11
  • 29
  • 2
    I don't think that's possible without the use of images. Similar: http://stackoverflow.com/questions/2460501/how-to-change-checkboxs-border-style-in-css – Aziz Jan 19 '14 at 23:08

3 Answers3

0

I doubt if its possible to do this. But you can try this: http://css-tricks.com/the-checkbox-hack

The question sounds kind of same as: Change the border color of the checkbox and radio button

Community
  • 1
  • 1
priynag
  • 1
  • 1
0

This works in chrome, but not firefox (actually trying to figure out how to fix it in firefox right now when I stumbled on this). Hopefully this helps

For the color of the center part of the checked radio:

input[type="radio"]:checked:after { background-color: #6bc298; }

for the border color:

box-shadow: 0 0 0 2px #6bc298;

Cody Jacques
  • 506
  • 5
  • 9
0

If you set the CSS property appearance:none then you can fully style any field, including checkboxes and radio buttons.

KingRidgehead
  • 85
  • 1
  • 8