whyoz whyoz - 4 months ago 37
CSS Question

Bootstrap select dropdown showing selected option above the control

enter image description here

Not sure why the selected option is showing above the custom dropdown. Here's the 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>


Tried defining a selected option (shown commented out) as well. Doesn't matter what I put in the CSS, at least all the things I've tried, but this is what's currently running along with any Bootstrap 3.3.7 mods to the select.

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


Actually haven't seen any other issues related to this exact issue, so I've been trying to hack my way through it. Shows the same "bug" across browsers. I am using a custom font for now, but I've tried to put a font-family change into the CSS above without luck.

Any ideas on how to get the option above the dropdown to go away?

UPDATE:

Here's the inspected column on 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>




I also added the js scripts at the end of the doc, including my custom main.js file that doesn't deal with anything related.

Answer

One of those javascript is adding that <span>...
Try to guess who is or do this dirty trick: hide it with css

.ui-select span { 
  display: none; 
}