IE 9的Dropdownlist不支持CSS

Question

我有一个HTML5制成的下拉列表。 但是它并没有采用IE 9中的CSS。请参见html。

<div class="lbl-drop">
    <label class="lbl">
      <div class="dropdown dropdown-dark">
        <select class="dropdown-select">
            <option selected=""> Date Added: Latest Firt</option>
            <option>Short Option</option>
            <option>This Is A Longer Option</option>
        </select>
      </div> 
    </label> 
</div>

上面是html代码，

请参阅CSS以供参考：

<style type="text/css">
   .dropdown:before {
        border-bottom-style: solid;
        border-top: none;
    }
    .dropdown:after {
        margin-top: 7px;
        border-top-style: solid;
        border-bottom: none;
    }
    .dropdown:before, .dropdown:after {
        content: '';
        position: absolute;
        z-index: 2;
        top: 9px;
        right: 10px;
        width: 0;
        height: 0;
        border: 4px dashed;
        border-color: #888 transparent;
        pointer-events: none;
    }
    .dropdown:before {
        border-bottom-style: solid;
        border-top: none;
    }
    .dropdown:after {
        margin-top: 7px;
        border-top-style: solid;
        border-bottom: none;
    }
</style>

还有一些我忘记的与此有关的CSS，对不起

<style type="text/css">
.dropdown-dark {
    padding: 4px;
    margin: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    /* -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; */
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    /* box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset; */
    background: transparent;
    font-family: "Lato-Italic";
    font-size: 14px;
    color: #a5a5a5;
    border: 1px solid #a5a5a5;
    outline: none;
    display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

Answer 1

让我们使用jQuery如下所示

  $(document ).ready(function() { $("select").after().addClass("color-change-select"); $("select option").after().addClass("color-change"); }); 

 .color-change-select { /* for the select */ color: white; font-size: 24px; display: blcok; position: relative; border: solid 1px red!important; background-color: maroon; } .color-change { /* for the options */ color: white; display: blcok; position: absolute; background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option> Date Added: Latest Firt</option> <option>Short Option</option> <option>This Is A Longer Option</option> </select> 

点击此链接，了解如何添加自己的链接并使它始终位于顶部

注意：使用jQuery方法将有助于解决浏览器问题