[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Form field background colour change

Posted on 2014-02-04
8
Medium Priority
?
501 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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 the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

656 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