0
231
Vistaschallenge with SELECT OPTION element in html css
I need to make a select option for a search feature (filter). I have the below code and output but that is not the expected outcome. I want the name of each select field to be on seen as shown in the UI design but it's been a challenge for me.
EXPECTED OUTCOME:
.filter-query{
display: flex;
padding: 0px 5px;
margin: 10px 20px;
}
.select-wrap {
border: 1px solid #118AB2;
border-radius: 5px;
padding: 0 5px;
width:70px;
background-color:#fff;
position:relative;
margin: 5px;
height: 30px;
}
.select-wrap select, .query{
background-color: #fff;
border:0px;
height:30px;
font-size: 12px;
margin: 0;
}
#filter-result{
background: #118AB2;
color: #fff;
font-family: sans-serif;
border-radius: 5px;
margin: 5px;
height: 30px;
border: 1px solid #118AB2;
}
.text{
border: 1px solid #118AB2;
border-radius: 5px;
width: 115px;
margin: 5px;
height: 30px;
}<div class="filter-query">
<input class="query text" type="text" placeholder="first name">
<input class="query text" type="text" placeholder="last name">
<div class="select-wrap">
<select name="position" id="position">
<option value="sales">Sales</option>
<option value="network">network</option>
</select>
</div>
<div class="select-wrap">
<select name="date" id="date">
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
</select>
</div>
<input class="query btn" type="button" value="Filter result" id="filter-result">
<div class="select-wrap">
<select name="sort" id="sort">
<option value="firstName">first name</option>
<option value="position">position</option>
</select>
</div>
</div>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
You'll need to add an extra <option> tag to you select fields. For example:
<select name="position" id="position">
<option value="" disabled selected>Position</option>
<option value="sales">Sales</option>
<option value="network">network</option>
</select>So in context of your question...
.filter-query{
display: flex;
padding: 0px 5px;
margin: 10px 20px;
}
.select-wrap {
border: 1px solid #118AB2;
border-radius: 5px;
padding: 0 5px;
width:70px;
background-color:#fff;
position:relative;
margin: 5px;
height: 30px;
}
.select-wrap select, .query{
background-color: #fff;
border:0px;
height:30px;
font-size: 12px;
margin: 0;
}
#filter-result{
background: #118AB2;
color: #fff;
font-family: sans-serif;
border-radius: 5px;
margin: 5px;
height: 30px;
border: 1px solid #118AB2;
}
.text{
border: 1px solid #118AB2;
border-radius: 5px;
width: 115px;
margin: 5px;
height: 30px;
}<div class="filter-query">
<input class="query text" type="text" placeholder="first name">
<input class="query text" type="text" placeholder="last name">
<div class="select-wrap">
<select name="position" id="position">
<option value="" disabled selected>Position</option>
<option value="sales">Sales</option>
<option value="network">network</option>
</select>
</div>
<div class="select-wrap">
<select name="date" id="date">
<option value="" disabled selected>Date</option>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
</select>
</div>
<input class="query btn" type="button" value="Filter result" id="filter-result">
<div class="select-wrap">
<select name="sort" id="sort">
<option value="" disabled selected>Sort by</option>
<option value="firstName">first name</option>
<option value="position">position</option>
</select>
</div>
</div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta