3

Bien mi problema es que tengo un <textarea> en mi pagina y utilizo el atributo placeholder= para darle el valor de usuario tal que : <textarea id="usuario_nick" placeholder="usuario">

El problema es que el texto dentro del textarea se alinea automáticamente a la izquierda pero quiero que se alinee hacia el centro del textarea no me refiero solo horizontalmente también verticalmente justo en el centro es posible? Existe una forma de mover solo el valor del placeholder en ese textarea como un padding-top y right ?.

Se que se puede tomar el placeholder con ::-webkit-input-placeholder pero esto me toma todos y quiero que suceda solo en 1 especifico.

2 respuestas 2

7

Se que se puede tomar el placeholder con ::-webkit-input-placeholder pero esto me toma todos y quiero que suceda solo en 1 especifico.

Solo debes anteponer el selector sobre el cual deseas modificar el pseudo-elemento ::placeholder. El selector puede ser una clase (eg: .miclase), un id (eg: #miId), etc.

quiero que se alinee hacia el centro del textarea no me refiero solo horizontalmente también verticalmente justo en el centro es posible?

Para alinearlo verticalmente puedes indicar un height específico para el textarea y luego el mismo valor para el line-height del placeholder.

Existe una forma de mover solo el valor del placeholder en ese textarea como un padding-top y right ?.

Si, solo debes indicar el padding-top que quieres aplicar.

Así por ejemplo:

.ph-center {
  height: 100px;
}
.ph-center::-webkit-input-placeholder {
  text-align: center;
  line-height: 100px;/* Centrado vertical */
}
<textarea placeholder="usuario"></textarea>
<textarea class="ph-center" placeholder="usuario"></textarea>

1
  • Gracias por la respuesta amigo @Marcos es una forma de hacerlo
    – theboshy
    Commented el 10 ago. 2017 a las 21:22
5

Puedes acceder mediante id.

Este sería el código:

#miid::placeholder {
  color: red;
  text-align: center;
  padding-top: 30px;
}
<textarea id="miid" placeholder="placeholder" rows="5"></textarea>

2
  • Gracias @Carmen exactamente lo que necesitaba
    – theboshy
    Commented el 10 ago. 2017 a las 21:22
  • No hay de que, me alegro que te sirva
    – Carmen
    Commented el 10 ago. 2017 a las 21:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.