La respuesta que te da el compañero en es perfectamente válida en su primera opción, necesitas darle las mismas características a través del css para que puedan comportarse del mismo modo a los input text
e input password
que al input submit
. Pero supongo que al probar esta opción te has dado cuanta de que el placeholder
se te coloca pegado a la izquierda y no quieres este efecto es por este motivo que que debes añair en tu css lo siguiente:
input[type=text] {
padding: 10px 0;
}
input[type=password]{
padding: 10px 0;
}
input[type=text]::-webkit-input-placeholder { /* WebKit browsers */
padding-left:15px;
}
input[type=text]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
padding-left:15px;
opacity: 1;
}
input[type=text]::-moz-placeholder { /* Mozilla Firefox 19+ */
padding-left:15px;
opacity: 1;
}
input[type=text]:-ms-input-placeholder { /* Internet Explorer 10+ */
padding-left:15px
}
input[type=password]::-webkit-input-placeholder { /* WebKit browsers */
padding-left:15px;
}
input[type=password]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
padding-left:15px;
opacity: 1;
}
input[type=password]::-moz-placeholder { /* Mozilla Firefox 19+ */
padding-left:15px;
opacity: 1;
}
input[type=password]:-ms-input-placeholder { /* Internet Explorer 10+ */
padding-left:15px
}