CODEWITHSUNDEEP
csstextboxvertical-alignment
Bryce
Bryce

Reputation: 309

Text box is vertical align middle or something... top or text-top won't work

I am using a plugin in WordPress that makes a form, I added a message box (this is a contact form) and gave it my own class, and in the css, I made it taller. That worked just fine, but whenever I click in the box, the cursor things goes to the middle, and it's not wrapping the text. I tried:

.messageBoxContactForm {
    vertical-align: top;
}

and

.messageBoxContactForm {
    vertical-align: text-top;
}

Here is the HTML:

<div>
  <label for="messageBox">* Message:</label>
  <input class="messageBoxContactForm ccf-tooltip-field" id="messageBox-1351642237" type="text" name="messageBox" value="">
</div>

Remember, this is in WordPress, so there is tons of PHP surrounding it.

Can anyone show me what I need to do?

Upvotes: 0

Views: 4667

Answers (3)

ProllyGeek
ProllyGeek

Reputation: 15836

Actually your issue is just that you have used the wrong tag <input>, you should have used <textarea> instead , so your html code should be :

<textarea></textarea>

and the default text alignment for textarea is top-left.

Upvotes: 0

Rick Calder
Rick Calder

Reputation: 18685

input type="text" doesn't wrap, it's not a multi line input and the height of it is completely irrelevant. You want a textarea input.

Try:

<input class="messageBoxContactForm ccf-tooltip-field" id="messageBox-1351642237" 
type="textarea" name="messageBox" value="">

The possible downside to this is textareas will take new lines.

Upvotes: 0

DariusLau
DariusLau

Reputation: 1393

Have you tried adding the following block,

.messageBoxContactForm {
   text-align: left;
}

http://www.w3schools.com/cssref/pr_text_text-align.asp

Upvotes: 1

Related Questions