Question 264729 in Html Question posted in
Some basic documentation can be found here.

Html – Resetting only a specific radio button group to CSS defaults?

I’m working on modifying a large project that uses HTML and CSS, among other things.

I need to re-style just one radio button group – so it has buttons and labels, not just labels. I specifically don’t want to re-style the whole project’s buttons – it’s too big to wade through all that and risk messing up other parts of it.

Right now, the buttons look like:
enter image description here

But I want them to look more like (with Preserved and Unpreserved):
enter image description here

I’ve tried more things than I can count, but most recently…

I tried the following CSS (minified):

.un_preserve_radio{all:initial;visibility:visible;appearance:radio;opacity:1;position:fixed;width:100%;-webkit-appearance:radio;-moz-appearance:radio;-O-appearance:radio}

With the following HTML:

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

Update: I just tried this HTML, which gave me black text (or blue text if I eliminate the "all: initial"):

<div style="color:blue; all: initial; visibility: visible;">
    <label>
        <input type="radio" name="un_preserved" onclick="preserved_button_click()" class="un_preserve_radio" />
        Preserved
    </label>
    <label>
        <input type="radio" name="un_preserved" onclick="unpreserved_button_click()" class="un_preserve_radio" />
        Unpreserved
    </label>
    <br />
</div>

This is almost a duplicate of reset the css of a input[radio] – but I really do want to reset just one radio button group to CSS defaults.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I needed (for example):

    <input type="radio" name="un_preserved" onclick="preserved_button_click()" style="width: 1em; height: 1em; overflow: visible; opacity: 1!important" />

    That !important was needed to override 4 global settings.

    I also needed to move a <br />, but the !important was the.... most important part.


  2. 0

    Since you haven’t posted the current CSS that is changing the radio/labels, I have a quick sample here.

    First, I gave the wrapping div a class called "radio-override".

    Then in CSS, I set the radio children of that class to have the visibility of visible. Then I also gave the label children a color of black and display of block to force each label/radio to a new line.

    .radio-override input[type='radio']{
  visibility: visible;
}

.radio-override label{
  color: black;
  display:block;
}
    <div class="radio-override">
  <label>
        <input type="radio" name="un_preserved" onclick="preserved_button_click()" class="un_preserve_radio" />
        Preserved
    </label>
  <label>
        <input type="radio" name="un_preserved" onclick="unpreserved_button_click()" class="un_preserve_radio" />
        Unpreserved
    </label>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search