whyoz whyoz - 11 days ago 6
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; 
}
Comments