Styling form elements! Help!

[sturgess1987]

Hi everyone!,

 

OK heres the question, i have created my form, and i want it so that when i click on say the textarea, the colour of the textarea will change as will the border colour. I have a feeling it is quite simple, but just cant get my head round it!

 

Heres the code for my form:

<form action="process_article.php" method="post" enctype="multipart/form-data" name="uploadform" id="uploadform">
     
                  <label>
                   Article content:
                  <textarea name="content"  cols="70" rows="10"></textarea>
                
</label>
                  
<label>
                  Tag this article:
                  <input type="text" name="tags" id="tags" size="28"/>
    </label>
                (seperate tags with commas)
    
  </form>

 

I would like to avoid using javascript to achieve this, any ideas?

 

----------------

Now playing: Kinks - Tired Of Waiting For You

via FoxyTunes

[haku]

You can only do that with javascript. CSS doesn't have any kind of onclick function.

[SuperBlue]

There isn't anything wrong with using Javasript for something like this, its one of those extra features users with scripting enabled will benefit from, not having scripting enabled will simply render the normal textarea.

 

I would only avoid using javascript for layout purposes, I.e rounded corners and such. But extra functionality would only be nice. All through such a behaviour is more or less useless, and might even annoy some users.

 

However, the feature you are looking for is the CSS focus pseudo class, see below.

textarea:focus { background-color: blue; }

Which works in most browsers.

 

 

You should also avoid wrapping the labels around the input fields.