asked on

CSS TextArea Formatting Using Input

I'm using the following CSS to round the corners on my text boxes over the whole site.

input { border:1px solid; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

This works great on most browsers, but it doesn't effect the textarea boxes. Is there a way to modify the formatting for the textarea boxes without having to edit each individual entry?

In other words, is there a way to modify the input commmand above to globally format the textarea as well as the text boxes?

Thanks!

ASKER CERTIFIED SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jesse Matlock

+1 for LZ1's response.. textareas are inputs, but they are NOT styled using 'input'.. they are targeted using 'textarea' :) Alternatively, you can add a class or an ID to a specific textarea, if you only want to target specific textareas.. and then style that class or ID.. eg.:

input {border:1px solid;}
.rounded {border:1px solid; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

Open in new window

<input type="text" name="" class="rounded" value="" /> <!-- this input WILL have rounded corners -->

<input type="text" name="" class="" value="" /> <!-- this input WILL NOT have rounded corners -->

<textarea name="" rows="8" cols="40" class="rounded"></textarea><!-- this textarea WILL have rounded corners --> 

<textarea name="" rows="8" cols="40" class=""></textarea><!-- this textarea WILL NOT have rounded corners -->

Open in new window

When you create CSS styles like this, they become very easy to re-use and allow you to re-use CSS code across projects .. like a toolkit :)

digitility

ASKER

Awesome, works great. Thanks.