Resetting a radio button to defaults?

[dstromberg]

Hello people.

I'm attempting to add a few radio buttons to a large HTML+CSS+Javascript (and Python on the backend) project.

Something, somewhere in the stack is changing radio buttons to be just their lablels, and no actual visible circles. In factd, they aren't just invisible: if I click where the circle would be by default, nothing happens. But if I click the labels, I get a test popup.

How can I reset a specific group of radio buttons, to CSS defaults?

I've tried more things than I can count, but most recently, I tried:

CSS:

/* .un_preserve_radio input[type="radio"] { */
  .un_preserve_radio {
  /* opacity: 1;
  ** position: fixed;
  ** width: 100%;
  ** -webkit-appearance: radio;
  ** -moz-appearance: radio;
  ** -O-appearance: radio;
  ** appearance: radio;
  */
  all: initial;
  }

And that's paired with this HTML:

<label>
    <input type="radio" name="un_preserved" onclick="preserved_button_click()" style="un_preserve_radio" />
    Preserved
</label>
<label>
    <input type="radio" name="un_preserved" onclick="unpreserved_button_click()" style="un_preserve_radio" />
    Unpreserved
</label>

But the web interface just looks like:


I'd share a URL, but this is an internal-only project.

What I want is something more like:


I don't really care much about the colors at this point. Not yet anyway. But I do want the circles.

Any suggestions? How can get (back) the little, fillable circles on the left of those labels?

Thanks!

 

[menator01]

remove all:initial; and the this style="un_preserve_radio" should be class="un_preserve_radio"

 

[dstromberg]

Thanks for the response.

I changed the style= to a class=, and commented out the all:initial;

Now I have:

/* .un_preserve_radio input[type="radio"] { */
.un_preserve_radio {
  /* opacity: 1;
  ** position: fixed;
  ** width: 100%;
  ** -webkit-appearance: radio;
  ** -moz-appearance: radio;
  ** -O-appearance: radio;
  ** appearance: radio;
  */
  /* all: initial; */
}

IOW, my un_preserve_radio makes no changes at all now.

But I still don't see any circles.

Any (further) suggestions?

Thanks again.

 

[menator01]

This is what I have and it works. I removed the class because I have nothing in it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>

</head>
<body>
    

<label>
    <input type="radio" name="un_preserved" onclick="preserved_button_click();">
    Preserved
</label><br />
<label>
    <input type="radio" name="un_preserved" onclick="unpreserved_button_click();">
    Unpreserved
</label>


</body>
</html>

 

[dstromberg]

Continued thanks for taking an interest in this.

I think a small test project would do the buttons well, but I'm working in a large project which has CSS coming from all over the place.

I'm thinking some snippet of CSS somewhere is changing the look of the radio buttons.

Rather than track down where that is, and potentially break other parts of the project, I want to reset just this one radio button group to defaults.

Or does that not make sense? I don't know much about CSS, and this project is taking my HTML knowledge into new territory as well.

Thanks!

 

[dstromberg]

It turned out someone had added some "important" settings, which was strongly deterring my local settings.

I got around that by adding my own "important" settings on those input elements, to override the broader/older ones.