Normally the button to the right of the choice is a pretty cobalt blue, I’d like to switch the color to a nice crimson, I tried editing the style.css in the .input sections, but no cigar. Anyone has any luck or knows how to do this?
Read this:
In a nutshell, radio buttons look the way they do because of the browser. On my android, when selected, they’re gray. In opera on my laptop, they’re orange. However, the above link leads to a way to customize them.
1 Like
@Flurrywinde11 Oh right! I forgot they looked different on my iphone than in Mozilla. Which is odd, because Mozilla Dev console was attributing the CSS to the input perfectly without any issues. Let me check if a background image works.
OK, halfway there, but in need of assistance:
I can get the button to change and put in a circle when clicked, but I cant for the life of me style the button differently (it shows up as a plain black dot now in a grey inset and I’m using mozilla firefox for the browser).
I added this code to my style.css file:
input[type='radio'] , input[type='checkbox']{
-webkit-appearance:none;
-moz-appearance:none;
margin-right:8px;
width:8px;
height:8px;
}
input[type=‘radio’], input[type=‘checkbox’]:hover {
box-shadow:0 0 5px 0px blue inset;
}
input[type=‘radio’], input[type=‘checkbox’]:before {
content:’’;
display:inline-block;
width:16px;
height:16px;
margin-right:8px;
}
input[type=‘radio’], input[type’checkbox’]:checked:before {
width: 8px;
height: 8px;
color: red;
}
Anything that you can see might help?
My knowledge of CSS is pretty low. You’re way ahead of me already!
Still looking into CSS code and the likes for the files, I can’t quite figure out the main details of where to find that exact area of the codes, but by the looks of it your closing in on it ahead of me, lemme know when ya do mate ^~^
I’m super late to the game, but figured I’d give input in case this is helpful to others down the road -
Cascading style sheets (CSS) go from top to bottom, so if you have two rules that are the same, the last one on the page will override the one higher up. We’ve got input[type=‘radio’] four different times and in three of those the width and the height are different. The last one input is width:8px and height:8px, so that’s what will be referred to. But that’s just a bit of the mess we’ve got going here.
Radio buttons and checkboxes are different as well, we shouldn’t be styling them the same or we lose context. A radio group allows you to ONLY select one option. Checkboxes let you select multiple. So, input[type=‘checkbox’] should be removed. It sounds like you’re not trying to style that anyway.
Some elements are controlled by your operating system - not the browser. It’s why the buttons can look different on Mac versus Windows versus Android, etc etc. The best way to change the look then is to hide it and put in your own with a background image. You’ll need two background images, one for the radio button unclicked and one for it clicked. We’re only really messing around with the background image, so we can remove a lot of this extra styling.
input[type=“radio”]{
-moz-appearance: none;
-webkit-appearance: none;
background:url(‘https://image.freepik.com/free-icon/radio-button-unchecked_318-40717.jpg’);
background-repeat:no-repeat;
background-size:100%;
height:8px;
width:8px;
}
input[type=“radio”]:checked{
-moz-appearance: none;
-webkit-appearance: none;
background-image:url(‘http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-md.png’);
background-repeat:no-repeat;
background-size:100%;
height:8px;
width:8px;
}
The image url is just the path to the image. So it’s relative to wherever your stylesheet is. If you have a folder called images, the path to the image will be ‘images/radio.jpg’ and ‘images/radio-checked.jpg’ as an example. I’ve only just started playing around with the Choice of Games stuff, so I’m not sure what the folder layout is like. You may have to play around.
I added a codepen here so you can see the css in action. I also did a default radio button group so you can see the difference. The codepen is something you can manipulate and change as well if that’s useful.