?
Solved

Form field background colour change

Posted on 2014-02-04
8
Medium Priority
?
494 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 53

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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

800 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