不确定为什么所选选项显示在自定义下拉列表上方。这是 html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="application/xhtml+xml; text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="cleartype" content="on">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="user-scalable=no">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/jasny-bootstrap.min.css" />
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script type="text/javascript" src="bootstrap/js/less.js"></script>
</head>
<body>
<div class="row">
<div class="col-xs-9">
<select>
<!-- <option selected disabled>Select Name:</option> -->
<option>Vogel</option>
<option>Other Name</option>
</select>
</div>
<div class="col-xs-3">
<button id="btn_id" class="button-info">Button</button>
</div>
</div>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery.tinycolorpicker.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/jasny-bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/offcanvas.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile.custom.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
也尝试定义一个选定的选项(显示为注释掉)。不管我在 CSS 中放入什么,至少我尝试过的所有东西,但这是当前与选择的任何 Bootstrap 3.3.7 mod 一起运行的内容。
select {
width:100%;
height:24px;
background-color:white;
border:2px solid black;
}
实际上还没有看到与这个确切问题相关的任何其他问题,所以我一直在尝试破解它。跨浏览器显示相同的“错误”。我现在使用的是自定义字体,但我曾尝试在上面的 CSS 中更改字体系列,但没有成功。
关于如何让下拉菜单上方的选项消失有什么想法吗?
更新:
这是 Firefox 上的检查列:
<div class="col-xs-9">
<div class="ui-select">
<div id="select-27-button" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow">
<span>Vogel</span>
<select size="1">
<option>Vogel</option>
<option>Other name</option>
</select>
</div>
</div>
</div>
我还在文档末尾添加了 js 脚本,包括不处理任何相关内容的自定义 main.js 文件。
最佳答案
其中一个 javascript 正在添加 <span>
...
试着猜猜谁在做这个肮脏的把戏:用 css 隐藏它
.ui-select span {
display: none;
}
关于jquery - Bootstrap 选择下拉列表显示控件上方的选定选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40729094/