我对数据列表标签内的选项标签有疑问。
我正在为某些用户创建一个界面,我需要选择大于输入的选项。
根据公司政策,我正在使用Firefox。 在这种情况下,我需要安装类似Chrome的产品: Chrome:
如您所见,在Firefox中,它保持输入的大小。 Firefox:
我更喜欢Firefox的样式,允许我滚动选项。但是如果它更大,那就更好了。我看不到全名。
这是我的代码,我添加了两个不在项目中的选项以查看其外观: 我的数据列表代码:
/*
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。
谢谢大家,对不起我的英语。