?
Solved

Form field background colour change

Posted on 2014-02-04
8
Medium Priority
?
502 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 1000 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 720 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 1000 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 280 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

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.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

809 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