用ul ,li 模仿select下拉列表

由于select,option的下拉列表样式有浏览器兼容问题，个人感觉利用ul li实现select下拉更美观 从而解决了样式兼容问题。
用ul li可以实现不停的动画效果，比起select option 更有趣 更丰富。

HTML代码：

<div class="select_box">
    <label for="">物 资 类 型&nbsp;：</label>
    <input id="myselect" type="text"  readonly="readonly" placeholder="请选择物资类型">
    <ul class="select_ul">
        <li>生活用品</li>
        <li>办公用品</li>
    </ul>
</div>

css代码：

.select_box {
    position:relative;
    padding:0;
    font-size:18px;
    width: 80%;
    margin-bottom: 40px;
    text-align: right;
}
ul,li {list-style-type:none; padding:0; margin:0}
.select_box input {
    cursor:pointer;
    display: inline;
    width:45%;
    overflow:hidden;
    border:2px solid #D1D1D1;
    background:url(down.png) no-repeat 265px center;
    border-radius: 3px;
    padding: 8px 10px;

}
.select_box ul {
    width:308px;
    position:absolute;
    top:36px;
    left: 327px;
    border:2px solid #D1D1D1;
    background:#fff;
    overflow: hidden;
    display:none;
    z-index:99999;
}
.select_box ul li {
    display:block;
    height:30px;
    overflow:hidden;
    line-height:30px;
    padding-left:5px;
    width:100%;
    cursor:pointer;
    text-align: left;
}
js代码：

<script src="jquery-3.1.1.min.js"></script>
<script>
    $(document).ready(function () {
        $(".select_box input").click(function(){
            var thisinput=$(this);
            var thisul=$(this).parent().find("ul");
            if(thisul.css("display")=="none"){
                if(thisul.height()>200){
                    thisul.css({height:"200"+"px","overflow-y":"scroll" })
                };
                thisul.fadeIn("100");
                thisul.hover(function(){},function(){thisul.fadeOut("100");});
                thisul.find("li").click(function(){
                    thisinput.val($(this).text());thisul.fadeOut("100");
                }).hover(function(){
                    $(this).addClass("hover");
                    },function(){$(this).removeClass("hover");});
            }

         else{
                thisul.fadeOut("fast");
            }
        })
    })
</script>

结果：

 

问题：这个示例在火狐里面如果选择了，当浏览器刷新之后 ，选择的未被清除，

其他的浏览器是正常的 希望大师们多多指点，多谢了！！！