CODEWITHSUNDEEP
htmlcss
user3619057
user3619057

Reputation: 405

How do I vertically align placeholder text in textarea?

I am trying to vertically align the placeholder text in textarea (textbox). I am using textarea instead of text input because I need to use multiple lines.

.textbox1 { 
  width: 440px;
}
<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

Upvotes: 37

Views: 58960

Answers (11)

MegaCasper
MegaCasper

Reputation: 1958

You can use absolutely positioned placeholder:

textarea::placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Check this example

Upvotes: 1

John Mangel
John Mangel

Reputation: 11

To improve on the padding answers, here is a way to guarantee calculations that center it. This works better than line-height for multiple lines, but it still means that once the user enters multiple lines of text, there will now be overflow to scroll, rendering the centering essentially useless

.textbox1 {
  --title-modal--textarea--height: 100px;
  /* font-size variable for calculations cannot be em, otherwise calculations become doubly-dependent on font-size */
  --title-modal--textarea--font-size: 1rem;
  --title-modal--textarea--line-height: 1.5;

  height: var(--title-modal--textarea--height) !important;
  font-size: var(--title-modal--textarea--font-size);
  line-height: var(--title-modal--textarea--line-height);

  padding-top: calc((var(--title-modal--textarea--height) - (var(--title-modal--textarea--line-height) * var(--title-modal--textarea--font-size)))/2);

  /* I used these to make sure the border doesn't take away from the height, */
  /* affecting the padding calculation, */
  /* but you could similarly turn them into variables and subtract */
  border-bottom: 0;
  border-top: 0;
}

Upvotes: 0

Rumyana Gareva
Rumyana Gareva

Reputation: 1

<textarea name="example" onFocus={onFocus} onBlur={outFocus} />
<label className={styles.Teaxarea_label}>Label</label>

and then you have those functions:

const outFocus = (event) => {
    if (event.target.value !== '') {
      event.target.nextSibling.style = "display:none;"
    }
    else {
      event.target.nextSibling.style = "display:block;"
    }
  }
  const onFocus = (event) => {
    event.target.nextSibling.style = "display:none;"
  }

CSS:

.Teaxarea_label{
  position: absolute;
  user-select: none;
  pointer-events: none;
  display: block;
}

textarea {
  position: relative;
}

Upvotes: 0

Igweze Ebele Mark
Igweze Ebele Mark

Reputation: 89

.textbox1 { 
    width: 440px;
    height:70px
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   line-height:70px;
   text-align: center; 
}

:-moz-placeholder { /* Firefox 18- */
   line-height:70px;
   text-align: center; 
}

::-moz-placeholder { /* Firefox 19+ */
   line-height:70px;
   text-align: center; 
}

:-ms-input-placeholder { /* IE 10+ */
   line-height:70px;
   text-align: center; 
}

You can check here CSS jsfiddle

Upvotes: 1

MrRobboto
MrRobboto

Reputation: 752

Just as an alternate solution - you could set the rows to an odd number and add half the rows rounded down in line feed characters to put the placeholder in the middle...

.textbox1 { 
  width: 440px;
}
<textarea class="textbox1"name="mytextarea"placeholder="&#10;Name" rows=3></textarea>

Upvotes: 1

Sunday Etom
Sunday Etom

Reputation: 341

Instead of using padding-top which will increase the height of the textarea and extra space down use the line-height here is a sample, you can vary the line-height.

textarea::placeholder {
line-height: 90px;

}

you can also use transform property like this:

   textarea::placeholder {
transform: translateY(-20px);

}

Upvotes: 14

SHUBHAM SINGH
SHUBHAM SINGH

Reputation: 377

Use the line-height property to make the placeholder vertically centered.

Upvotes: -1

dev7
dev7

Reputation: 6369

One option is to use line-height:

.textbox1 { 
    width: 440px;
    height:30px;
    line-height:30px;
}


.textbox1 { 
    width: 440px;
    height:30px;
    line-height:30px;
}
<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

You can also use padding to control the position of the text.

Here's an example using padding-top

.textbox1 { 
    width: 440px;
    padding-top:15px;
}
<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

UPDATE

Since the requirements include multi-line support, I'd recommend setting the top and bottom padding i.e:

.textbox1 { 
    width: 440px;
    height:6px;
    padding: 30px 5px;
}


.textbox1 { 
    width: 440px;
    height:60px;
    padding: 30px 5px;
}
<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

Upvotes: 10

rmondesilva
rmondesilva

Reputation: 1792

I guess this is not exactly what you want, But try to look ..

To center it vertically, I multiplied the height of the element to 7.5% and make it line-height.

.textbox1{
width: 440px;
height:100px;
line-height: calc(100 * 7.5%);
}
.textbox1:focus{
  line-height: 14px;
}

Check it here. pure CSS jsFiddle

Note: CSS3 calc() function only works on modern browsers. You can manually change/calculate the line-height if you want it to work on older browsers.

or you really have to use jQuery

I made a help of jQuery here jQuery jsFiddle

Upvotes: 1

Christian Gollhardt
Christian Gollhardt

Reputation: 17004

This works for latest Firefox, IE/Edge, Chrome in pure CSS:

textarea { 
    width: 440px;
    height:600px; /* Note this is the same height as the placeholders line-height */
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    line-height:600px;
}
::-webkit-input-placeholder { /* Webkit */
    line-height:600px;
}
:-ms-input-placeholder { /* IE */
    line-height:600px;
}

See this fiddle. The key is to set the height of the textarea to the same line-height as the placeholder.

Sadly vertical-align: middle; seems not to be supported yet.

Upvotes: 7

typo
typo

Reputation: 1071

Your best bet is to use padding, as line height will not work over multiple lines.

Additionally, make sure to take into account the line height / font size when calculating your padding.

Upvotes: 3

Related Questions