Small inputs bug on iphone

[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

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

[Author]

Posts