JSFiddle - React, Tailwind, and code Playground
HTML
<section id="search">
<header>
<h2>Búsqueda de propiedades</h2>
</header>
<div>
<form name="buscar_propiedad" id="buscar_propiedad">
<div>
<div class="icon icon-airplane"></div>
<label class="overlabel"><span>Lugar</span>
<div class="fakeinput"></div>
<select name="lugar" required>
<option value="2">Deià</option>
<option value="3">Valldemossa</option>
<option value="4">Soller</option>
</select>
</label>
</div>
<div>
<div class="icon icon-forward"></div>
<label class="overlabel"><span>Tipo de propiedad</span>
<div class="fakeinput"></div>
<select name="tipo" required>
<option value="1">Villa</option>
<option value="2">Finca Rústica</option>
<option value="3">Apartamento</option>
<option value="4">Casa adosada</option>
<option value="5">Solar</option>
<option value="6">Palacio</option>
<option value="7">Hotel</option>
</select>
</label>
</div>
<div>
<div class="icon icon-heart"></div>
<label class="half overlabel"><span>Min.</span><input type="text" name="minimo" required></label>
<label class="half overlabel"><span>Máx.</span><input type="text" name="maximo" required></label>
</div>
<div>
<div class="icon icon-cart"></div>
<label class="overlabel"><span>Dormitorios</span>
<div class="fakeinput"></div>
<select name="dormitorios" required>
<option value="1">Nº de dormitorios</option>
<option value="2">1 - 2</option>
<option value="3">2 - 3</option>
<option value="4">3 - 4</option>
<option value="5">4 - 6</option>
<option value="6">≥ 6</option>
</select>
</label>
</div>
<div>
<input type="submit" value="BUSCAR" class="button" />
<a class="clear-form" href="#">Borrar</a>
</div>
</form>
</div>
</section>
CSS
section#search {
padding: 25px 1%;
overflow: hidden;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #b1becc));
background-image: -webkit-linear-gradient(#ffffff, #b1becc);
background-image: -moz-linear-gradient(#ffffff, #b1becc);
background-image: -o-linear-gradient(#ffffff, #b1becc);
background-image: linear-gradient(#ffffff, #b1becc);
}
/* line 6, ../sass/_search.scss */
section#search > header h2 {
text-transform: uppercase;
text-align: center;
font-size: 20px;
margin-bottom: 20px;
}
/* line 15, ../sass/_search.scss */
section#search > div > form > div {
position: relative;
padding-left: 35px;
margin-bottom: 10px;
float: left;
width: 100%;
}
/* line 22, ../sass/_search.scss */
section#search > div > form label {
display: block;
}
/* line 24, ../sass/_search.scss */
section#search > div > form label.half {
float: left;
margin-right: 1%;
width: 49.5%;
}
/* line 28, ../sass/_search.scss */
section#search > div > form label.half:last-child {
margin-right: 0;
}
/* line 38, ../sass/_search.scss */
section#search > div > form label.overlabel {
position: relative;
}
/* line 40, ../sass/_search.scss */
section#search > div > form label.overlabel span {
position: absolute;
top: 10px;
left: 20px;
color: #d4cfcc;
text-transform: uppercase;
}
/* line 49, ../sass/_search.scss */
section#search > div > form .icon {
float: left;
background-color: f1ece2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
position: absolute;
left: 0;
}
/* line 57, ../sass/_search.scss */
section#search > div > form select {
display: none;
}
/* line 60, ../sass/_search.scss */
section#search > div > form .fakeinput, section#search > div > form input[type=text] {
background: white;
padding: 10px 0px;
border: 1px solid #211915;
display: inline-block;
width: 100%;
height: 35px;
}
/* line...
JavaScript
$(function(){
$('body').on('click','.fakeinput',function(){
console.log(true);
$(this).next('select').show().click();
});
$('body').on('blur','select',function(){
$(this).hide();
});
})