Я пытаюсь добавить значок каретки вниз к первому выбору из нескольких вариантов, как показано на рисунке ниже:
Вот скрипка с моим примером.
Я не могу получить значок, который будет виден на скрипке выше.
И соответствующий код:
.wrapper {
height: 200px;
background-color: red;
padding-top: 100px;
padding-left: 150px;
}
#before-select {
font-size: 30px;
color: #ffffff;
}
select {
border: none;
background: transparent;
/*background-color: blue;*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 180px;
padding-top: 0px;
background-size: 20px;
color: #ffffff;
font-size: 30px;
}
select option {
color: #424146;
background: #ffffff;
}<link rel="stylesheet" type="text/css" href="#" onclick="location.href='https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css'; return false;" />
<link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'; return false;" />
<div class="wrapper">
<form role="form">
<span id="before-select">in</span>
<select name="town">
<option value="London">London <i class="fa fa-caret-down" aria-hidden="true"></i>
</option>
<option value="Paris">Paris</option>
<option value="Madrid">Madrid</option>
</select>
</form>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>