Use li instead select option - html

Question

as you can see in the bottom code i create li to make list instead select option in html tag. but i get undesirable thing in appearance.
how to make li width same like bottom width. i have added value of width in css. the value 100% make li wider than bottom.
how tom make caret and number inside li position float in right. i can add class pull-rigt to make it in right position but it make caret higher than text in left position (i want make them in same middle vertical position)
.instead-option {
z-index:999;
position: absolute;
margin: 0;
max-height:300px;
background: #ffffff;
border-radius:4px;
border:1px solid #dddddd;
width:100%;
overflow:auto;
}
.instead-option > li {
width:100%;
background: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
.instead-option > li > a{
display: flex;
width: 100%;
}
.instead-option > li:nth-child(odd) {
background-color: #ffffff;
}
.instead-option > li:nth-child(even) {
background-color: #e5e5e5;
}
.instead-option > li:hover {
background: #aaa;
}
.instead-option > li > a{
color:#232323;
text-decoration:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<button type="button" class="form-control text-left nominal">Pilih nominal<span class="caret caret-right"></span></button>
<ul class="instead-option list-unstyled">
<li>English <span class="text-primary pull-right">10000</span></li>
<li>Deutsch <span class="text-primary pull-right">50000</span></li>
</ul>
</div>
</div>
</div>

Answer 1

Since you have position: absolute; on .instead-option element, you can have another element wrapping with position: relative;.
You can use a small hack to position the caret both horizontally and vertically by using top: 50%; rule.
.instead-option {
z-index: 999;
position: absolute;
margin: 0;
max-height: 300px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #dddddd;
width: 100%;
overflow: auto;
}
.instead-option > li {
width: 100%;
background: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
.instead-option > li > a {
display: block;
width: 100%;
}
.instead-option > li:nth-child(odd) {
background-color: #ffffff;
}
.instead-option > li:nth-child(even) {
background-color: #e5e5e5;
}
.instead-option > li:hover {
background: #aaa;
}
.instead-option > li > a {
color: #232323;
text-decoration: none;
}
.dropdown-container {
position: relative;
}
.dropdown-container .caret {
position: absolute;
/* Have the same padding to right as in the button*/
right: 12px;
/* Position the element from top by 50% of the parent element's height */
top: 50%;
/* Moves the element from its current position by -50% on Y axis to position the element vertically middle*/
transform: translateY(-50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="dropdown-container">
<button type="button" class="form-control text-left nominal">Pilih nominal<span class="caret caret-right"></span>
</button>
<ul class="instead-option list-unstyled">
<li>English <span class="text-primary pull-right">10000</span>
</li>
<li>Deutsch <span class="text-primary pull-right">50000</span>
</li>
</ul>
</div>
</div>
</div>
</div>

Answer 2

You're using position:absolute on the .instead-option list. As such, width:100% is calculated independent of the containing div's padding value.
You can fix this by changing your css to match the padding on the col div
.instead-option {
z-index:999;
position: absolute;
margin: 0;
max-height:300px;
background: #ffffff;
border-radius:4px;
border:1px solid #dddddd;
/* width:100%; */ /* REMOVE THIS LINE */
overflow:auto;
left:15px; /* matches column left padding */
right:15px; /* matches column right padding */
}

Answer 3

Below is your answer. Fixed both points, See additional css added at the end of css code .
.instead-option {
z-index: 999;
position: absolute;
margin: 0;
max-height: 300px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #dddddd;
width: 100%;
overflow: auto;
}
.instead-option > li {
width: 100%;
background: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
.instead-option > li > a {
display: flex;
width: 100%;
}
.instead-option > li:nth-child(odd) {
background-color: #ffffff;
}
.instead-option > li:nth-child(even) {
background-color: #e5e5e5;
}
.instead-option > li:hover {
background: #aaa;
}
.instead-option > li > a {
color: #232323;
text-decoration: none;
}
/*Additional Css*/
.instead-option {
width: calc(100% - 30px)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<button type="button" class="form-control text-right nominal">
<span class="pull-left">Pilih nominal</span><span class="caret caret-right"></span>
</button>
<ul class="instead-option list-unstyled">
<li>English <span class="text-primary pull-right">10000</span>
</li>
<li>Deutsch <span class="text-primary pull-right">50000</span>
</li>
</ul>
</div>
</div>
</div>