0
228
Viewsdesafío con el elemento SELECT OPTION en html css
Necesito hacer una opción de selección para una función de búsqueda (filtro). Tengo el siguiente código y salida, pero ese no es el resultado esperado. Quiero que el nombre de cada campo de selección se vea como se muestra en el diseño de la interfaz de usuario, pero ha sido un desafío para mí.
GASTOS ESPERADOS:
.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 answers
Answer question0
Deberá agregar una etiqueta <option> adicional a sus campos de selección. Por ejemplo:
<select name="position" id="position"> <option value="" disabled selected>Position</option> <option value="sales">Sales</option> <option value="network">network</option> </select>Así que en el contexto de tu pregunta...
.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
Report
Answer question