填充不适用于 IE11 中的 SELECT OPTION答案

【问题标题】：Padding not working for SELECT OPTION in IE11填充不适用于 IE11 中的 SELECT OPTION
【发布时间】：2016-07-10 06:14:45
【问题描述】：

~我已经创建了列表框控件并尝试在选项之间添加填充，它适用于 chrome 但不适用于 IE11，任何人都可以提出我做错了什么。我需要将项目放置在具有行距的列表框中。下面的代码包含我正在使用的样式表和具有选择选项标签的 HTML 代码，尝试了带有填充、边距、行距等的样式，但没有运气。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>change demo</title>
  <style>
  div {
    color: red;
  }
  </style>
  
  
<style type="text/css">
    select::-ms-expand { /* for IE 11 */
      display: none;
    }

    .ListBox {		
        background-color: transparent;
        font-family: verdana;
        font-size: 8pt;
        font-weight: bold;
        color: black;
		vertical-align:middle;		
    }
	
	.ListBox option
	{
		padding:30px 30px 30px 30px;		

		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		-o-appearance: none;
		appearance: none;
	}
}
}
	
</style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<select name="sweets" multiple="multiple" class="ListBox">
  <option>Chocolate</option>
  <option selected="selected">Candy</option>
  <option>Taffy</option>
  <option selected="selected">Caramel</option>
  <option>Fudge</option>
  <option>Cookie</option>
</select>
<div></div>
 
<script>
$( "select" )
  .change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .change();
</script>
 
</body>
</html>

【问题讨论】：

改用边距或宽度和高度，样式选项在浏览器中的支持不是很好
margin , width height 对我没有任何帮助
选项 {display:block;} 然后尝试各种选项
好的会尝试更新
option{display:block} 没有区别

标签： jquery html css select option

【解决方案1】：

刚刚找到这个

select::-ms-expand { /* for IE 11 */
    display: none;
}

这里：

How to style the <option> with only CSS?

【讨论】：

:) 可能是……但我必须让它看起来很漂亮。请帮忙。