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做，如下所示

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Follow this link to see how you can add your own link and get it to always stay at the top

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

IE 9 for Dropdownlist不支持CSS

1 个答案: