原生select，鼠标悬浮在option，改变鼠标的样式

Question

    <select v-model="selectType1" class="form-control" >
                <option value="ID"></option>
                <option value="PASSPORT" :disabled="userRights ==='HKID'"></option>
    </select>

有这么一个下拉选择框，我把第二项做了动态禁止，但是我想实现：鼠标悬浮在禁止的那项option，改变鼠标的样式，我加了行内样式，不管用。

Answer 1

系统生成的下拉option，无法更改。可以用第三方的控件来模拟select，这样可以控制，比如select2。简单示例如下。不过题主用到了vue，需要注意添加

<link href="http://select2.github.io/select2/select2-3.5.3/select2.css" type="text/css" rel="stylesheet" />
<style>
    /*重写不允许选择的模拟容器curor样式*/
    .select2-disabled div{cursor:not-allowed!important}
</style>
<select v-model="selectType1" class="form-control" id="sel">
    <option value="PASSPORT" disabled>1111</option>
    <option value="2222">2222</option>
    <option value="3334">3334</option>
</select>
<script src="http://select2.github.io/select2/js/jquery-1.7.1.min.js"></script>
<script src="http://select2.github.io/select2/select2-3.5.3/select2.js"></script>
<script>
    $("select").on('select2-selecting', (e) => {
        alert(e.val);//要用到this.selectType1=e.value更新model
    }).select2();
</script>