Question

0

233

Views

challenge 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 search fields

.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>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-05T05:06:04.987Z

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>

0

233

challenge with SELECT OPTION element in html css

1 answers

0

Find remote jobs

Andres GPT