Solved

Form field background colour change

Posted on 2014-02-04
8
475 Views
Last Modified: 2014-02-06
Hi Experts,

How can I make web fields to their background changes colour when the cursor is in that field?

For example.  Scroll to the bottom of this webpage:
    http://blenderkitchensystems.com/ninja-mega-kitchen-system-1500-review-does-it-really-work/
Click in the "Name *" field, and note how the background turns from grey to white.

I've had a look at some of the source, and I see this:
    <p><input class="text_input" type="text" name="author" id="author" value="" tabindex="1" aria-required="true" /><label for="author">Name <span class="required" title="Required">*</span></label></p>
So I assume something it operating on the text_input class, but I can't yet see an applicable CSS file.  Maybe it's JavaScript?

I'm using Firefox, in case that is relevant.

Thanks.
Tel2
0
Comment
Question by:tel2
8 Comments
 
LVL 8

Accepted Solution

by:
Adrian Crabtree earned 250 total points
ID: 39834716
Hi tel2, you can achieve this with the CSS pseudo-class :focus. Your CSS would look something like this:

input.text_input {
    background: #ccc;
    border: 1px solid #999;
    outline: none; 
}
input.text_input:focus {
    background: #fff;
    border: 1px solid #d5d5d5
}

Open in new window

Here is an example of it: http://jsfiddle.net/4xnbn/

Also, you can read more about pseudo-classes here: http://css-tricks.com/pseudo-class-selectors/
0
 
LVL 12

Author Comment

by:tel2
ID: 39834719
Well answered, Adrian!  And fast!

Q1. Does :focus work with all popular browsers/versions?

Q2. Any other issues with this, that you can think of?
0
 
LVL 12

Author Comment

by:tel2
ID: 39834731
PS: Adrian,

If there's some site I can use for answering Q1 myself (now, or in future), that would be helpful to know.

Thanks again.
Tel2
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 180 total points
ID: 39834734
If you just want all inputs with a background color you can use css. Since you want the color only when it has focus, you can use jquery which is loaded on your page already.
http://jsbin.com/padasQ_28356743/1/edit?html,js,output


$(function() {
 
$('#commentform input').focusout(function () {
    $('#commentform input').css('background-color', 'white');
});
$('#commentform textarea').focusout(function () {
    $('#commentform textarea').css('background-color', 'white');
});

$('#commentform input').focus(function () {
    $(this).css('background-color', 'yellow');
});
$('#commentform textarea').focus(function () {
    $('#commentform textarea').css('background-color', 'white');
    $(this).css('background-color', 'yellow');
});
});

Open in new window

Note, in the jsbin, I did not use the ready function as I did here.
0
 
LVL 12

Author Comment

by:tel2
ID: 39834742
Thanks for that, padas.

> ...you can use jquery which is loaded on your page already.
It might be loaded on the page of the example I gave, but I don't intend to us it on my site.  I intend to use as little JavaScript as I can get away with.
But good answer.
0
 
LVL 8

Assisted Solution

by:Adrian Crabtree
Adrian Crabtree earned 250 total points
ID: 39834758
Hi tel2, for compatibility, :focus works on all modern browsers and IE8 and above. More on that can be found here: http://reference.sitepoint.com/css/pseudoclass-focus

:focus is a CSS2 property so most browser will support it.
0
 
LVL 9

Assisted Solution

by:Sar1973
Sar1973 earned 70 total points
ID: 39835161
Try to add an onfocus event to the object and use the background property (see http://www.w3schools.com/jsref/prop_style_backgroundcolor.asp).
0
 
LVL 12

Author Closing Comment

by:tel2
ID: 39840952
Thanks for that, Sar.

And thanks to you all for your answers.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question