Visualización de inputs en Responsive

[madman_18]

Hola buenos días!

Tengo un problema con una web que estoy implementando y como no, es responsive.

En mi hoja de estilos tengo esto:

Código CSS:

input,select,textarea{font-family: 'Open Sans',sans-serif;-webkit-appearance:none!important;}
 

Y me funciona en inputs que son submit, reset etc...los típicos de un formulario. Pero viendo al detalle la web en el teléfono (un iPhone) me doy cuenta que los inputs de texto me los está curvando, es decir le aplica el estilo por defecto como si ese estilo no lo cogiese.

No sé por qué lo hace así...he probado a establecer el valor de la apariencia en el estilo del input pero tampoco funciona.

El estilo del input es el siguiente:

Código CSS:

.input-form,.textarea-form{
    width:100%;
    height:32px;
    line-height:32px;
    border:none;
    border-bottom: 2px solid #2DB4D6;
    background:none;
    position: relative;
    z-index: 10;
    box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
        -o-box-sizing:border-box;
    transition:all ease-in-out 0.3s;
        -webkit-transition:all ease-in-out 0.3s;
        -moz-transition:all ease-in-out 0.3s;
        -ms-transition:all ease-in-out 0.3s;
        -o-transition:all ease-in-out 0.3s;
}
 

Y el elemento es un input "normal y corriente"

Código HTML:

<input class="input-form" type="text" placeholder="Escriba su nombre de contacto" name="nombre" id="nombre"/>
 

Os pongo una captura

[pzin]

No estás indicando por ningún sitio border-radius: 0.