Question

不确定所选选项显示在自定义下拉列表上方的原因。这是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模块的选择。

select {
width:100%;
height:24px;
background-color:white;
border:2px solid black;
}

实际上还没有看到与此确切问题相关的任何其他问题，所以我一直试图通过它破解我的方式。显示相同的＆＃34;错误＆＃34;跨浏览器。我现在正在使用自定义字体，但是我试图在没有运气的情况下将字体系列更改到上面的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>

我还在doc的末尾添加了js脚本，包括我的自定义main.js文件，它不会处理任何相关内容。

Answer 1

其中一个javascript正在添加<span> ...
试着猜猜是谁或做这个肮脏的伎俩：用css隐藏它

.ui-select span { 
  display: none; 
}

Answer 2

select {
width:100%;
height:24px;
background-color:white;
border:2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

 
<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>
</body>

这段代码完全没问题，我们需要在页面上看到其余的代码才能理解你的问题

更新：我没有在线访问的唯一文件

<link rel="stylesheet/less" type="text/css" href="style.less" />

没有代码效果很好我觉得有一些错误或风格影响你的选择

Bootstrap选择下拉列表，显示控件

2 个答案: