custom radio button background color is not working on internet explorer

I Have Custom radio buttons like :

https://screenshots.firefox.com/SIa4ExZ50mcwP2Wd/localhost

through this code

  <!DOCTYPE html>
<html>
<style type="text/css">
    .seco {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        border-radius: 50%;
        width: 16px;
        height: 16px;

        border: 2px solid #999;
        transition: 0.2s all linear;
        outline: none;
        margin-right: 5px;

        position: relative;
        top: 4px;
    }

    .seco:checked {
        border: 3px solid black;
        background: #1df01d;
    }

    .faso {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        border-radius: 50%;
        width: 16px;
        height: 16px;

        border: 2px solid #999;
        transition: 0.2s all linear;
        outline: none;
        margin-right: 5px;

        position: relative;
        top: 4px;
    }

    .faso:checked {
        border: 3px solid black;
        background: red;
    }
</style>
<body>

      <div class="col-md-12 col-xs-12 " >
      <div class="col-md-10" >
      <div class="col-md-4 col-xs-4 no-padding" >
      <p class="skill_eng"></p>
      </div>
      <div class="col-md-4 col-xs-4 no-padding"  >
      <div class="col-md-12 col-xs-12 no-padding"  >
      <div class="col-md-6 col-xs-6 "  >
      <input type="radio" checked="checked" class="faso" >
      </div>
      <div class="col-md-6 col-xs-6 skill_radio" >
      <input type="radio" class="seco">
      </div> 
      </div>
      </div>
      <div class="col-md-4 col-xs-4 no-padding" >
      <p ></p>
      </div>
      </div>
      </div>

</body>
</html>

But in my case its working fine with the mozila,chrome and safari but its not working with internet explorer. why this happening i am not able to understand is there any easy way to run this code with the internet explorer (ie). please help me related this from tommorrow i stuck with this ....'

in internet explorer its now showing the color on background but working fine with the chrome and mozila..

2 answers

  • answered 2018-04-17 04:49 Obsidian Age

    The secret is that in Internet Explorer, the :checked styles the outside of the <input>, which you don't see. In order to change the check itself, you're looking for the ::ms-check pseudo-class, applying the following rules to specifically target Internet Explorer:

    .engyes:checked::-ms-check {
      border: 3px solid black;
      background: #1df01d;
    }
    
    .engno:checked::-ms-check {
      border: 3px solid black;
      background: red;
    }
    

    This can be seen in the following:

    .engyes {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      border: 2px solid #999;
      transition: 0.2s all linear;
      outline: none;
      margin-right: 5px;
      position: relative;
      top: 4px;
    }
    
    .engyes:checked {
      border: 3px solid black;
      background: #1df01d;
    }
    
    .engno {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      border: 2px solid #999;
      transition: 0.2s all linear;
      outline: none;
      margin-right: 5px;
      position: relative;
      top: 4px;
    }
    
    .engno:checked {
      border: 3px solid black;
      background: red;
    }
    
    .engyes:checked::-ms-check {
      border: 3px solid black;
      background: #1df01d;
    }
    
    .engno:checked::-ms-check {
      border: 3px solid black;
      background: red;
    }
    <body>
      <div class="col-md-12 col-xs-12 no-padding skill-main">
        <div class="col-md-10 col-md-offset-1 col-xs-12 no-padding skill-inside">
          <div class="col-md-4 col-xs-4 no-padding">
            <p class="skill_eng" style="text-align:center;"></p>
          </div>
          <div class="col-md-4 col-xs-4 no-padding">
            <div class="col-md-12 col-xs-12 no-padding">
              <div class="col-md-6 col-xs-6 no-padding skill_radio">
                <input type="radio" checked="checked" id="engno'+val.id+'" name="eradios['+val.id+']" value="0" data-for="no" class="radio-design engno">
              </div>
              <div class="col-md-6 col-xs-6 skill_radio">
                <input type="radio" id="engyes'+val.id+'" name="eradios['+val.id+']" value="'+val.id+'" data-for="yes" class="radio-design engyes">
              </div>
            </div>
          </div>
          <div class="col-md-4 col-xs-4 no-padding">
            <p class="skill_arb" style="text-align:center;"></p>
          </div>
        </div>
      </div>
    
    </body>

  • answered 2018-04-17 04:49 Hanif

    Your approach is not cross-browser. Try following way, here note 2 important issue set for value your input id and label must immediate after corresponding radio buttton. Right now I keep them as a placeholder

    .manage-radio {
    	position: absolute;
        opacity: 0;
    	z-index: -1;
    }
    .style-radio {
    	display:inline-block;
    	vertical-align:top;
    	width:16px;
    	height:16px;
    	box-sizing: border-box;
    	border: 2px solid #ddd;
    	background-color:#fff;
    	border-radius: 50%;
    }
    .manage-radio:checked + .style-radio {
        border: 3px solid #000;
    	background-color:#1df01d;
    }
    <div class="col-md-6 col-xs-6 ">
    	<input type="radio" id="id1" class="radio-design engyes manage-radio">
        <label class="style-radio" for="id1"></label>
    </div>
    <div class="col-md-6 col-xs-6 skill_radio">
    	<input type="radio" id="id2" class="radio-design engyes manage-radio">
        <label class="style-radio" for="id2"></label>
    </div>