Set a textbox Multiline without losing CSS

Question

I have a project with several textboxes and need some of them to become Multiline. But the problem is, when I set them Multiline I lose all my CSS styles. I've searched around and found out that textbox turns into TextArea on runtime, is Multiline is selected. Although, I'm still looking for a way to keep or overwrite somehow the CSS to keep my backcolor, size and preferred font

Did you checked this link http://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize — G.L.P, Jul 01 '14 at 12:11

Yannici · Answer 1 · 2014-07-01T11:40:13.227

I don't really understand what you mean. Multiline Textboxes are Textareas, but thats not set on runtime. You have to expand your css selection and add textarea.

I don't know if that is what you are looking for, but I just made an example on jsfiddle: http://jsfiddle.net/N79fj/1/

HTML:

<form action="#" method="post">
    <input type="text" name="test" /><br /> <!-- Textbox -->
    <textarea name="textarea" cols="30" rows="5"></textarea> <!-- Textarea (Multiline) -->
</form>

CSS:

input[type="text"], textarea {
    background-color: #000;
    color: #fff;
    font-family: Arial;
}

score 0 · Answer 2 · answered Jul 01 '14 at 11:27

0

Try changing your CSS so that instead of it applying to input[type=text] it applies to textarea.

Also change your actual HTML to make the "multiline" textboxes into TextArea's.

I'm also slightly confused what you mean by "runtime". There is no run-time in HTML/CSS web pages?

answered Jul 01 '14 at 11:27

Jakob

1,109
9
20

This is as asp.net page so that's why i said "runtime" – Filipe Vilhena Jul 01 '14 at 11:42

richa_pandey · Answer 3 · 2014-07-01T11:54:48.057

0

CSS

.textArea { 
  background: #ccc !important; 
  font-size:12px !important; 
 } /*change css properties as you want*/

Apply this class on your multi line textbox with class="textArea" attribute.

edited Jul 01 '14 at 11:54

answered Jul 01 '14 at 11:34

richa_pandey

4,210
3
31
48

you checked that in firebug? see my update in answer. try writing `!important` after every property. – richa_pandey Jul 01 '14 at 11:54
you checked in firebug..? what it is showing there? – richa_pandey Jul 01 '14 at 12:02
apparently it's ok. I'm using IE9 and checked with F12, and it is showing the CSS configurations as they should appear on screen... but sadly they aren't – Filipe Vilhena Jul 01 '14 at 12:57

Set a textbox Multiline without losing CSS

3 Answers3