jq：

$(".select-head").each(function(){

$(this).click(function(event) {//自定義下拉列表框顯示和隱藏
console.log(0);
$(this).siblings("ul.option").toggleClass("hide");//切換hide樣式
$(this).parent().toggleClass("select_active");//切換select_active樣式
event.stopPropagation();//阻止該標籤向上冒泡
//當點選其他自定義下拉列表時關閉下拉框
$(this).parents(".option_div").siblings(".option_div").find("ul.option").addClass("hide");
//當點選其他自定義下拉列表時關閉select_active樣式
$(this).parents(".option_div").siblings(".option_div").find("li.select").removeClass("select_active");
}) 
})

$("body")[0].addEventListener("click",function(){//當點選其他地方時自定義下拉列表框隱藏和效果移除
 $("ul.option").addClass("hide"); 
 $("li.select").removeClass("select_active");

},false)

css樣式

/*下拉框樣式*/
.select_ul {
width: 100%;
height: 100%;
display: inline-block;
list-style: none;
line-height: 2;
z-index: 15 !important;
}
 .select{

}


.select {
width: 100%;
height: 100%;
font-family: "微軟雅黑";
font-size: 18px;
color: #000000;
border: 1px #bdbceb solid;
border-radius: 5px;
position: relative;
border-radius: 8px;
outline: 0;
line-height: 2;

}
li.select_active{
-moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, .075), 0 0 8px
rgba(102, 175, 233, .6); /* For Firefox3.6+ */
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, .075), 0 0 8px
rgba(102, 175, 233, .6); /* For Chrome5+, Safari5+ */
border-color: #66afe9;
box-shadow: 0 0 0 rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}


.select-icon {
color: black;
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit瀏覽器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期瀏覽器*/
user-select: none;
}


.select-head {
position: absolute;
top: -2px;
overflow: hidden;
width: 100%;
height:100%;
box-sizing: border-box;
padding: 0 10px;
line-height: 2;
z-index: 15 !important;
}


.select-head .select-head-cont {
float: left;
}


.select-head .select-icon {
float: right;
}


.option {
text-indent: 10px;
margin-top: 17.098%;
color: black;
background: rgba(252, 252, 252, 1);
line-height: 25px;
border: 1px #cfcfcf solid;
list-style: none;
overflow: auto;
z-index: 16 !important;
}


.option-item:hover {
background: rgba(204, 106, 67, 0.3);
z-index: 16 !important;
}

html：

<div class="content">
<div class="model_options_div">
<div class="option_div">
<span>規則名稱 :</span> <input type="text" class="efence_input_model">
<span class="ruleType_span">規則型別:</span>
<div class="selectSize">
<ul id="select_ul" class="select_ul">
<li id="select" class="select">
<div class="select-head">
<span class="select-head-cont"></span> <span
class="select-icon">▼</span>
</div>
<ul class="option hide">
<li class="option-item">chrome</li>
<li class="option-item">safari</li>
<li class="option-item">Edge</li>
<li class="option-item">firefox</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="option_div" >
<span style="display: inline-block;">區域名稱</span>
<div class="selectSize_area">
<ul  class="select_ul">
<li  class="select">
<div class="select-head">
<span class="select-head-cont"></span> <span
class="select-icon">▼</span>
</div>
<ul class="option hide">
<li class="option-item">chrome11</li>
<li class="option-item">safari11</li>
<li class="option-item">Edge11</li>
<li class="option-item">firefox11</li>


</ul>
</li>
</ul>
</div>

</div>
<div class="option_div ">

</div>
</div>
</div>