Option: überprüft funktioniert nicht mit IE 11

Ich habe Tag auswählen und müssen Hintergrundbild der Option basierend auf Auswahl ändern. Ich benutze Stil unten, Dieser Stil funktioniert mit Chrom aber nicht mit IE 11. Nicht sicher, welche Änderungen ich tun muss, damit es auf IE 11 funktioniert?Option: überprüft funktioniert nicht mit IE 11

  option:checked 
      {  
         background-image: url("SelectBlue.png"); 
         color: white; 
      }

Full HTML-Code unten

  <!doctype html> 
      <html lang="en"> 
      <head> 
       <meta charset="utf-8"> 
       <title>change demo</title> 
       <style> 
       div { 
       color: red; 
       } 
       </style> 


      <style type="text/css"> 

       select::-ms-expand 
       { 
        display:none;  
       } 
       .ListBox{  
        background-color: transparent; 
        font-family: verdana; 
        font-size: 8pt; 
        font-weight: bold; 
        color: black; 
        vertical-align:middle; 
        height:400px; 
        width:300px; 
       } 

       option:checked {  
        background-image: url("DataGridSelectBlue.png"); 
        color: white; 
       } 

      </style> 

       <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
      </head> 
      <body> 

      <input id="hid" type="hidden"> 
      <select id="sweets" name="sweets" multiple="multiple" class="ListBox"> 
       <option value="a">Chocolate</option> 
       <option value="b" selected="selected">Candy</option> 
       <option value="c">Taffy</option> 
       <option value="d" selected="selected">Caramel</option> 
       <option value="e">Fudge</option> 
       <option value="f"> Cookie</option> 
      </select> 

      <select name="food" multiple="multiple" class="ListBox"> 
       <option>Idly</option> 
       <option selected="selected">Sambar</option> 
       <option>Dosa</option> 
       <option selected="selected">Bisibele bhath</option> 
       <option>chutney</option> 
       <option>upma</option> 
      </select> 

      <div></div> 

      </body> 
      </html>

Quelle

2016-07-10 Sandeep

können Sie Teilen Sie bitte auch Ihren HTML Code? –

Hinzugefügt HTML-Code – Sandeep

Es scheint, dass es keine volle Unterstützung für die Änderung der Farbe/Hintergrund einer aktivierten Option gibt, aber es gibt immer noch Eigenschaften, die Sie ändern können - wie "Grenze": http://codepen.io/anon/pen/wWAmjK –

Nach einer tieferen Forschung

zu MDN Nach dem: ist geprüft CSS Pseudo-Klasse-Selektor (Grundzug) kompatibel zu IE11:

Chrome 1.0
Firefox (Gecko) 1.0
Internet Explorer 9.0
Opera 9.0
Safari 3,1

Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

Wenn ja, der Grund, warum es nicht funktionieren könnte, dass die Eigenschaft 'background-image' nicht vollständig browserkompatibel.

Ich bin mit Chrom und haben folgendes codepen (basierend auf Ihren Code) erstellt - Sie können es testen auf verschiedenen Browsern zu sehen, welche Eigenschaft unterstützt wird:

  option:checked {  
       background-color: green; /*Won't apply*/ 
       color: green; /*Won't apply*/ 
       border:1px solid green; /*Will apply (at least on chrome)*/ 
       background-image:url('http://www.bostonscientific.com/content/dam/bostonscientific/utility-icons/icon_Phone.png'); /*Will apply (at least on chrome)*/ 
      }

http://codepen.io/anon/pen/wWAmjK

Quelle

2016-07-10 14:23:15

Option: überprüft funktioniert nicht mit IE 11

Antwort

Verwandte Themen