title: How to change size of text input but not textarea in jquery mobile
body: <p>There are many answers here about how to change various properties of jQuery text input fields, but none of them that I found address the difference, if any, between regular text input and textarea</p>
  
  <p>I figured out how to change CSS properties of a text input field, with the class</p>
  
  <pre><code>.ui-input-text{
      height:42px !important;
      background: #AB63CC !important;
  }
  </code></pre>
  
  <p>That's what the answers on this site have told me. And it works flawlessly, all text input fields are now 42px high and a lovely lilac color.</p>
  
  <p>Unfortunately, all text input variants get a 42px override, this includes textareas. So when I add that CSS, while all text input fields line up perfectly with menu widgets, my textareas can no longer be resized, and I can't override that because of the <code>!important</code> tag.</p>
  
  <p>Even custom classes don't work. so if I make, for example:</p>
  
  <pre><code>.textinput-foo .ui-input-text{
      height:42px !important;
  }
  </code></pre>
  
  <p>in my CSS, then</p>
  
  <pre><code>&lt;label for="example" id="my-fancy-textinput" class="ui-hidden-accessible"&gt;LoremIpsum&lt;/label&gt;
    &lt;input name="example" id="example" value="" placeholder="LoremIpsum" type="text" class="textinput-foo"&gt;
  </code></pre>
  
  <p>in my HTML, in an attempt to allow only certain fields to be resized while others (like textareas) retain their default properties, nothing happens. So I tried:</p>
  
  <pre><code>.ui-input-text .textinput-foo{
      height:42px !important;
  }
  </code></pre>
  
  <p>in case it might be affixing the default class instead of appending it. Still no luck. Custom classes for the textarea don't work any better.<br>
  <b>Textarea CSS:</b></p>
  
  <pre><code>.ui-input-text .textarea-foo{
      height:100px !important;
  }
  </code></pre>
  
  <p><b>Textarea HTML:</b></p>
  
  <pre><code>&lt;label for="example-2" id="my-fancy-textarea" class="ui-hidden-accessible"&gt;More&lt;/label&gt;
  &lt;textarea cols="40" rows="8" name="example-2" id="example-2" placeholder="Type stuff plox" class="textarea-foo"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>I figured that if I couldn't make the textarea resizable, then maybe I could at least make it 4 lines so it shouldn't need to be resized. Alas, still nothing.</p>
  
  <p>Is there a separate text input class that doesn't apply to textarea or vice versa, because I haven't been able to find one anywhere, not even in the <a href="http://api.jquerymobile.com/textinput/" rel="nofollow">official APIs</a></p>