Forums

jarc100

I'm making a mobile webapp with css3 media queries in which i need a seach box with text inputs, the problem is that i can only select the wider inputs.

This is my html markup

  <div class="mobileSearchBox">
   <form>
  <div class="mobileSearchRow first">
    <div class="fullCol">
      <input type="text" placeholder="Buscar por destino, hotel o tour"/>
    </div>
    </div>

    <div class="mobileSearchRow">
      <div class="thirdCol">
                  <input class="mobileSerchInputHalf" type="text" placeholder="Fecha Salida"/>
      </div>
      <div class="thirdCol">
        <input class="mobileSerchInputHalf" type="text" placeholder="Fecha Regreso"/>
      </div>
      <div class="thirdCol omega">
        <input class="mobileSerchInputHalf" type="text" placeholder="No. Habs"/>
      </div>
    </div>

    <div class="mobileSearchRow">
      <div class="halfCol">
        <input class="mobileSerchInputHalf" type="text" placeholder="No. Habs"/>
      </div>
      <div class="halfCol omega">
        <input class="mobileSerchInputHalf" type="text" placeholder="No. Adultos"/>
      </div>
    </div>

    <div class="mobileSearchRow">
             <div class="threeCuartersCol">
        <input type="submit" value="Buscar"/>
      </div>
    </div>
  </form>
  </div><!-- termina caja de busqueda mobile -->

Eric

And your css?

jarc100

/*****************//*CAJA DE BUSQUEDAS y FILTROS EN MOBILE*//*****************/

.MobileReady .mobileFilterBox,
.MobileReady .mobileSearchBox { float: left; height: 0; overflow: hidden; /*padding: 8px 8px;*/ background: #fff; }

.MobileReady .mobileFilterBox.opened,
.MobileReady .mobileSearchBox.opened { float: left; width: 100%; height: auto; overflow: visible; padding: 8px 8px 20px; margin-bottom: 15px; border-bottom: 3px solid #999; opacity: 1; }

.MobileReady fieldset { margin: 0; }

.MobileReady .mobileSearchBox,
.MobileReady .mobileFilterBox { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; 
  -webkit-transition-duration: 400ms; -webkit-transform-style: preserve-3d; opacity: 0; 
}

.MobileReady .ShowHideSearchBox,
.MobileReady .ShowHideFilterBox { cursor: pointer; }

.MobileReady .ShowHideSearchBox.ShowSearch .ico .close,
.MobileReady .ShowHideFilterBox.ShowFilter .ico .close { display: none; }

.MobileReady .ShowHideSearchBox.ShowSearch.ShowClose .ico .close,
.MobileReady .ShowHideFilterBox.ShowFilter.ShowClose .ico .close { display: block; }

.MobileReady .ShowHideSearchBox.ShowSearch.ShowClose .ico .search,
.MobileReady .ShowHideFilterBox.ShowFilter.ShowClose .ico .filter { display: none; }

/*Triangulo hacia arriba en caja de busqueda y filtros mobile*/
.MobileReady .mobileSearchBox:after,
.MobileReady .mobileFilterBox:after { 
content: "";
position: absolute;
z-index: 2;
top: -10px;
right: 50px;
width: 0; 
height: 0; 
border-left: 10px solid transparent;
border-right: 10px solid transparent;

border-bottom: 10px solid #fff;
}

/*Posicion del triangulo solo para caja de filtros mobile*/
.MobileReady .mobileFilterBox:after { 
right: 20px;
}

/*Contenedor Tabs Opciones de busqueda*/
.MobileReady .mobileSearchOptions { border-bottom: 1px solid #ccc; margin-bottom: 10px; }
.MobileReady nav.mobileSearchOptions .mobileSearchOptionsTab { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 5px; height: 40px; line-height: 30px;  margin-bottom:-1px; text-align: center; font-weight: 900; color: #999; width: 154px;  }

.MobileReady nav.mobileSearchOptions .mobileSearchOptionsTab.Act { background: #fff; border: 1px solid #ccc; border-bottom: none; color: #333; }

/*filas en caja busqueda mobile*/
.MobileReady .mobileSearchRow { display: flex; display: -webkit-flex; -webkit-transition-duration: 400ms; position: relative; -webkit-transform-style: preserve-3d; -webkit-perspective: 1000px;}

/*columnas dentro de las filas para inputs en caja de busqueda mobile*/
.MobileReady .mobileSearchBox .fullCol { width: 100%; }
.MobileReady .mobileSearchBox .halfCol { width: 50%; float: left;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;  }
.MobileReady .mobileSearchBox .halfCol.omega { float: right; padding-left: 5px; }

.MobileReady .mobileSearchBox .thirdCol { width: 32%; float: left; padding-right: 5px; }
.MobileReady .mobileSearchBox .thirdCol.omega { padding: 0; width: 33%; }

.MobileReady .mobileSearchBox .threeCuartersCol { width: 80%; margin: 0 auto; }

/*Inputs dentro de caja de busqueda mobile*/
.MobileReady .mobileSearchBox a { display: block; text-align: center; text-decoration: none; line-height: 38px; }
.MobileReady .mobileSearchBox a,
.MobileReady .mobileSearchBox input { width: 100%; height: 35px; margin: 0 0 5px 0; border: 1px solid #ccc; background: #f4f4f4; position: relative;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0px; border-radius: 0px; -webkit-box-shadow:none; box-shadow:none;  -webkit-transform 500ms cubic-bezier(0.000, 0.050, 1.000, 0.550), background-color 500ms ease-out; -webkit-appearance:none; }
  .MobileReady .mobileSearchBox input:focus { background: #fff; border-color: #e3e3e3; }

/*boton buscar dentro para la caja de busqueda mobile*/
.MobileReady .mobileSearchBox a,
.MobileReady .mobileSearchBox [type="submit"] { height: 40px; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 

.MobileReady .mobileSearchBox .noHabs { background: #fff; height: 27px; width: 100%; border-color: #ccc; color: #444; }

sorry forgot to post it before.

treehouse : what would you like to learn today?

Forums

Small inputs bug on iphone