1

I have a custom-made radio button, green colored. everything works well both on chrome and IE11, except the color. On chrome, the color is green as planned and on IE11 the color is black.

I attached here the css and HTML. here is my HTML:

                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
                            <span class="formText">Kitzva</span>
                            <input id="radioKitzva" type="radio" />

                        </div>
                        <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
                            <span class="formText">Itra</span>
                            <input id="radioItra" type="radio" />
                            <asp:HiddenField ID="HiddenField_Itra_Kitzva" runat="server" />

                        </div>

css:

    /*EDIT RADIO BUTTONS*/

    /* When the radio button is checked, add a green background */
    input[type=radio] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        border: 2px solid #999;
        transition: 0.2s all linear;
        margin-right: 5px;
        position: relative;
        top: 4px;
    }

        input[type=radio]:checked {
            border: 6px solid #008053;
        }

    input[type="radio"]:focus {
        outline: 0px;
    }

Print screen attached : IE11 : IE11 - checked , IE11 - not checked Chrome: Chrome - checked , Chrome - not checked

Thanks alot for the support.

Improve this question

2 Answers 2

Reset to default
1

To apply a similar effect to the radio button in the IE 11 browser, I suggest you add the CSS code below in your above-mentioned code.

input[type="radio"]:checked::-ms-check 
{
        border: 6px solid #008053;
        color: white;
}

Full modified code:

<!doctype html>
<html>
   <head>
      <title>demo</title>
      <style>
         /*EDIT RADIO BUTTONS*/
         /* When the radio button is checked, add a green background */
         input[type=radio] {
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
         border-radius: 50%;
         width: 16px;
         height: 16px;
         border: 2px solid #999;
         transition: 0.2s all linear;
         margin-right: 5px;
         position: relative;
         top: 4px;
         }
         input[type="radio"]:checked {
         border: 6px solid #008053;
         }
         input[type="radio"]:checked::-ms-check {
         border: 6px solid #008053;
         color: white;
         }
         input[type="radio"]:focus {
         outline: 0px;
         }
      </style>
   </head>
   <body>
      <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
         <span class="formText">Kitzva</span>
         <input id="radioKitzva" type="radio" />
      </div>
      <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12">
         <span class="formText">Itra</span>
         <input id="radioItra" type="radio" />
         <asp:HiddenField ID="HiddenField_Itra_Kitzva" runat="server" />
      </div>
   </body>
</html>

Output in IE 11 browser:

enter image description here

Further, you can try to modify the code as per your own requirements.

Improve this answer
0
0

IE doesn't support appearance, not with nor without prefix. See here.

The attribute selector is supported since IE 7.0. See here.

edit: I do suggest that you change your [type=radio] to [type="radio"]. Either should be fine, but the latter is more conforming to standards.

Improve this answer
2
  • Thamks, so as I understand from your answer there is no way, using the same css (or by editing few rows) to make it work the same both in IE11 and Chrome?
    – Guy Ravnof
    Commented Mar 16, 2021 at 13:19
  • correct. IE just doesn't have good input styling options. I doubt that's important though, it's fine if the site looks a little ugly on IE since nobody uses it anymore.
    – Riedler
    Commented Mar 16, 2021 at 13:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.