Jqery and CSS Firefox功能失效!!!

css jquery jquery3.1.1 html5 php

小哈 2020-03-12 11:10:43 ‧ 1663 瀏覽

Dear 前輩~
我在GOOGLE CHROME 是正常(圖一),只是在火狐跟IE就有問題(圖二)!!!
是程式碼哪裡要修改?麻煩前輩指教~~~

![https://ithelp.ithome.com.tw/upload/images/20200312/20089833xiQn5MZLDL.jpg](https://ithelp.ithome.com.tw/upload/images/20200312/20089833xiQn5MZLDL.jpg)
<!DOCTYPE html>
<html>
<form name="reg" method="post" action="sendmail.php">
<meta charset="utf-8" />
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<title>Download Page</title>
<body>

<script>
$(document).ready(function() {
      
	$(".multiple_select").mousedown(function(e) {
    if (e.target.tagName == "OPTION") 
    {
      return; //don't close dropdown if i select option
    }
    $(this).toggleClass('multiple_select_active'); //close dropdown if click inside <select> box
    });

    $(".multiple_select").on('blur', function(e) {
    $(this).removeClass('multiple_select_active'); //close dropdown if click outside <select>
    });
	
    $('.multiple_select option').mousedown(function(e) { //no ctrl to select multiple
    e.preventDefault(); 
    $(this).prop('selected', $(this).prop('selected') ? false : true); //set selected options on click
    $(this).parent().change(); //trigger change event
    });
		
		
	$("#interest").on('change', function() {
      var selected = $("#interest").val().toString(); //here I get all options and convert to string
      var document_style = document.documentElement.style;
      if(selected !== "")
        document_style.setProperty('--text', "'"+selected+"'");
      else
        document_style.setProperty('--text', "'Select The Interest*'");
	});		
	
		
});	
	

	
	
</SCRIPT >


<style>
:root
{
	--text: "Select The Interest*";
}
.multiple_select
{
	height: 18px;
	width: 90%;
	overflow: hidden;
	-webkit-appearance: menulist;
	position: relative;
}
.multiple_select::before
{
	content: var(--text);
	display: block;
    margin-left: 5px;
    margin-top: 3px;
    margin-bottom: 2px;
}
.multiple_select_active
{
	overflow: visible !important;
}
.multiple_select option
{
	display: none;
    height: 100%;
	width: 100.1%;
	padding: 0.5px;
	background-color: white;
	margin-left: -1px;
}
.multiple_select_active option
{
	display: block;
}

.multiple_select option::before {
  content: "\2610";
}
.multiple_select option:checked::before {
  content: "\2611";
}
	
</style>	


			<B>Interest*　</B>
			<select style="width:541px;height:25px;font-size:15px; align='center';border-radius:3px;border: 1px solid #d8d8d8;" name="interest" id="interest" class="multiple_select" multiple>
			<!--<option value="" selected="selected">Select The Interest*</option>-->
            <option value="TEST1">TEST1</option>
            <option value="TEST2">TEST2</option>
            <option value="TEST3">TEST3</option>
            <option value="TEST4">TEST4</option>

            </select></p>

</body>	
</form>
</html>