Question

我在Internet Explorer上有一个下拉列表，我正在尝试使用可滚动列表设置选项的宽度：

<select id="IndicsLibres" style="width:200px;overflow-y: scroll;">
  <option id="teste" value="0" style="max-width:10px;width:10px;">
    ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdddddddddddddddddddffffffffffffffff
  </option>
  <option value="1">aaaa</option>
  <option value="2">bbb</option>
</select>

但是我制作的样式无效。你有什么建议吗？

Answer 1

选择框，单选按钮和复选框由于其本机代码而在不同的浏览器中呈现不同的外观。因此，为了实现所需的功能，您需要编写自定义功能。

Answer 2

如果您的选项中有空格，则以下代码示例可能会帮助您解决问题。

	$(function() {
    var clicky;
    var t=0;
    $(document).mousedown(function(e) {
        clicky = $(e.target);
    });
    $(document).mouseup(function(e) {
        clicky = null;
    });

    $("select").focusout(function(e) {
        if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) {
        	$(this).parents().children("span.selected").html(clicky.html());
        	$(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true);
		}
        
        $(this).parents().children("span.lists").html('');
        

    });
    $('select > option').text(function(i, text) {
				var attr = $(this).attr('selected');
				if (typeof attr !== typeof undefined && attr !== false) {
        				$(this).parents().parents().children("span.selected").html(text);
				}
	});

		$("select").focusin(function(){
			$(this).children('option').text(function(i, text) {
    			$(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>");
				});
		});

	});

select {
  width: 0px;
  height: 0px;
  overflow:hidden;
  outline: none;
  border: none;
  appearance:none;
  -moz-appearance: none;

}
label{
	display: inline-block;
	padding: 5px 10px;
	position: relative;
	width: 100px;
	height: 20px;
	background-color:#ccc;

}
label .selected{
	display: inline-block;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
label span.lists{
	width: 100%;
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	box-shadow: 0px 0px 2px 0px #ccc;
	background-color:#fff;
	z-index: 9;
}
label span.item{
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid #ccc;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<form action="?" method="GET">
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2" selected>ffffffff ffffffff ffffffff fffffff fffffff ffffff ffffff ffffff</option>
		<option value="3">item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<label><span class="selected">select..</span> <span class="lists"></span>
	<select name="test2">
		<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>
		<option value="2">item 2</option>
		<option value="3" selected>item 3</option>
		<option value="4">item 4</option>
	</select>
	</label><br>
	<button>Submit</button>
</form>

</body>
</html>

使用Internet Explorer 11输出：

Reference taken from this SO post

Answer 3

我对代码进行了一些更改。可以减小初始宽度，但不能减小下拉菜单的宽度，因为必须覆盖整个选择项的长度。

#IndicsLibres {
  width: 100px;
}

<select id="IndicsLibres">
  <option id="teste" value="0">
    ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdddddddddddddddddddffffffffffffffff
  </option>
  <option value="1">aaaa</option>
  <option value="2">bbb</option>
</select>

如何在下拉列表中设置选项的宽度？

3 个答案: