html - 如何使选项标签大于输入

Question

我对 datalist 标记内的选项标记有疑问。

我正在为一些用户创建一个界面，我需要使选项大于输入。

根据公司的政策，我正在使用 Firefox。在这种情况下，我需要得到类似 Chrome 的东西：Chrome：

如您所见，在 Firefox 中，它保持为输入的大小。火狐：

我更喜欢 Firefox 的风格，允许我滚动选项。不过要是再大点就更好了。我看不到全名。

这是我的代码，我添加了两个项目中没有的选项来查看它的外观： 我的 datalist 代码：

/*
function buscaFuncionarios(idImput, idDatalist) {
	    
	    var input  = document.getElementById(idImput);
		var list   = document.getElementById(idDatalist);
		var lDados = <?php echo json_encode(!is_null($this->session->flashdata('funcionarios'))); ?>;

		if (input.readOnly == false && list.children.length == 0) {	

			if (lDados) {	
			
				var funcionarios1 = <?php echo json_encode($this->session->flashdata('funcionarios')); ?>;

				for (var indice in funcionarios1) {
					var option = document.createElement('option');
				   option.label = funcionarios1[indice]["Codigo"] + " - " + funcionarios1[indice]["Nome"];
				   option.value = funcionarios1[indice]["Codigo"];											
				   list.appendChild(option);
				}

		    }

		}

	};
*/

.stylish-input-group .input-group-addon{
    background: white !important; 
    padding: 0px 0px 0px 0px;
}
.stylish-input-group .form-control{
	border-right:0; 
	box-shadow:0 0 0; 
	border-color:#ccc;
}
.stylish-input-group button{
    border:0;
    background:transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-sm-2">
  <div class="input-group stylish-input-group">
    <input type="text" class="form-control" name='post_func2' id="post_func2" maxLength="6" list="list_func_2" onclick="//buscaFuncionarios('post_func2', 'list_func_2');" onfocus="this.select();">
    <datalist id="list_func_2" open="open">
    <option value = '1'>1-Test</option>
    <option value = '2'>2-Test</option>
    </datalist>
		<span class="input-group-addon">
		  <button type="button" id="post_btn_func2" onclick="printaRelatorioFuncionario('post_func2')">
			  <span class="glyphicon glyphicon-search"></span>
      </button>  
    </span>
  </div>
</div>

注意：我正在使用 codeigniter 和 bootstrap。

谢谢大家，对不起我的英语。

标签： htmltwitter-bootstrap-3html-datalist