Using accent-color:black to modify the color of a radio button in a form.
Using ExeOutput 2021.0, when project is compiled, CSS accent-color defaults to blue. On my localhost, using Chrome versions 114.0.5735.199 (Official Build) (64-bit), the radio button is black. Is also black using Firefox 115.0 (64-bit).
I tried both inline style and class. Same result.
I did search and review The Chromium Projects web site for some possible answers. No luck.
Do I need a Chromium extension? If so, how would I install it for ExeOuptut? Or is there an option for rendering engine that I need to turn on? I do have EnableMediaStream checked.
Fought this some myself. One time using !important solved the issue and next time had to use a bootstrap library like Bootswatch: Default
Try the !important first, example:
input[type="radio"] {
background-color: black !important;
}
My example is of course just that, an example since do not know your code.
Thanks for the response.
I did try !important and background-color instead of accent-color. No luck. Tried multiple ways too.
What I did find that works is using filter. To get a black radio button:
filter: grayscale(100%) contrast(200%);
I would also like to have red button, but can’t do with filter (at least what I tried with all the options).
There are a bunch of hacks (with lots of code) to set a color to a radio button. But that doesn’t make sense since accent-color is a simple solution and should work (it’s been around since 2021).
My suggestion is to place your basic working code on codepen.io then embed here. As you stated there "There are a bunch of hacks (with lots of code) ". Without seeing your code everything recommended is a shot in the dark.
<input type="radio" id="collectDataW1" name="collectDataW" value="BOX" class="radioAccent" onClick="setGroup('A');setWalkoff();" /> <span style="font-size:85%;">BOX or</span>
<input type="radio" id="collectDataW2" name="collectDataW" value="PAC" class="radioAccent" onClick="setGroup('A');setWalkoff();" /> <span style="font-size:85%;">PAC</span>
.radioAccent {
position:relative;
margin:5px 3px 0px 0px;
accent-color:black;
}
Not sure if I’m correctly doing this. in copepen.io I placed the above HTML in the HTML column and the CSS in the CSS column. I do see the following in the output:
So it seems to be working.
When I ExeOutput compile this same code, the radio is blue not black.
To use CodePen you simply add your code and save, then paste the link here.
Not sure this will fix your issue, but note the !important in css color (under css tab), try that and see if helps.
Make sure it is the last style loaded on your page using the tag (below all others).
Here is another version of your button that I tested in exeout. Try it and see if better:
For testing I removed the onClick calls. I know it shouldn’t matter but I scaled down the code.
The program has a link to a css script file. That’s where class .radioAccent is located. And it’s somewhat in the middle of the file but certainly the only radioAccent. I changed accent-color:black; to accent-color:black !important;. codepen shows black, ExeOuput shows blue.
I then removed .radioAccent class from the css file and placed it last in the program’s style script. ExeOutput still shows blue. I then removed it from the style script and placed it inline within the input statement as follows:
<input type="radio" id="collectDataW1" name="collectDataW" value="BOX" style="margin: 5px 3px 0px 0px; accent-color: black !important;" /> <span style="font-size:85%;">BOX or</span>
<input type="radio" id="collectDataW2" name="collectDataW" value="PAC" style="margin: 5px 3px 0px 0px; accent-color: black !important;" /> <span style="font-size:85%;">PAC</span>
ExeOutput still shows blue.
And just to be sure, I also did accent-color:#000000 !important; Same result.
Let me check your latest post. I’ll get back to you.
Your latest example worked. I wanted to only do black on certain radios, and it worked as long as I wrapped those particular radios inside a div.
I was unsuccessful in posting my codepen. Do I need the Pro version to do that?
No, do not need a pro account. The codepen account I am using here is free level. I do think you must have free codepen account and logged though.
Once you have got your pen saved, you just copy the URL shown in browser and paste it here. I will look broken in preview but once you publish the pen is visible.
Should work using div’s. Ran this through exeout test and seemed ok:
Yes. All good.
Asking G.D.G. - why doesn’t accent-color work?