Solved

Form field background colour change

Posted on 2014-02-04
8
474 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

Question has a verified solution.

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

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

803 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