/    Sign up×
Community /Pin to ProfileBookmark

manipulating background colours of an input box

Copy linkTweet thisAlerts:
Aug 04.2005

[CODE]#someDiv input:hover,
#someDiv input:active {
background: #FFF5C1;
}[/CODE]

The above CSS code will allows the background of an input box to change while the user moves their mouse over and clicks on the box itself.

However, when the user starts typing in the box and moves their mouse away from the box the background changes back to a default #FFFFFF (white).

What would I need to do in order for the colour to stay #FFF5C1 (yellow) when the user is typing in the box as well? As I’ve mentined before I already have the :hover and :active set up in my CSS syntax.

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@ray326Aug 05.2005 — I believe you'll need Javascript for that one.
Copy linkTweet thisAlerts:
@MstrBobAug 05.2005 — <i>
</i>#someDiv input:hover, #someDiv input:active, #someDiv input:focus {
background: #FFF5C1;
}


Keeping in mind, this only works with browsers advanced enough to support pseduo classes on elements other than links (i.e. not Internet Explorer).
Copy linkTweet thisAlerts:
@00110111authorAug 05.2005 — Thanks guys.

Considering many people still use IE, I will need it to be compatible with that browser as well. I thought it'd be possible with CSS and without JavaScript. Well off to find a JS solution for this...
Copy linkTweet thisAlerts:
@KravvitzAug 05.2005 — This is one of many reasons why IE6 is a second rate browser -- it has a serious lack of CSS2 support.

Take a look at these:

http://dean.edwards.name/IE7/

http://www.htmldog.com/articles/suckerfish/

[url=http://www.xs4all.nl/~peterned/csshover.html]whatever:hover[/url]
×

Success!

Help @00110111 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...