Grow your CSS skills. Land your dream job.

Small inputs bug on iphone

  • # January 5, 2013 at 3:04 pm

    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

    # January 5, 2013 at 5:38 pm

    And your css?

    # January 7, 2013 at 1:12 pm

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".