選項：選中不與IE兼容11

我有選擇標籤，需要根據選擇更改選項的背景圖像。我正在使用下面的樣式，這種樣式與Chrome瀏覽器一起工作，但不能與IE 11一起工作。不知道我需要做什麼改變才能在IE 11上工作？選項：選中不與IE兼容11

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

HTML全文如下

  <!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>

來源

2016-07-10 Sandeep

你可以請分享您的html代碼？ –

已添加html代碼 – Sandeep

似乎沒有完全支持修改選中選項的顏色/背景，但仍有一些屬性可以修改 - 比如「border」：http://codepen.io/anon/pen/wWAmjK –

更深層次的研究

根據MDN後代碼：檢查CSS僞類選擇器（基本功能）是兼容IE11：

Chrome 1.0
Firefox（Gecko）1.0
的Internet Explorer 9.0
歌劇院9.0
的Safari 3.1

來源：https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

如果是的話，它可能無法正常工作的原因是財產 '背景圖像' 不是完全兼容瀏覽器。

我使用的是Chrome和已經創建瞭如下codepen（根據您的代碼） - 你可以測試它在幾個瀏覽器看到的是被支持哪個屬性：

  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

來源

2016-07-10 14:23:15

選項：選中不與IE兼容11

回答

相關問題