/    Sign up×
Community /Pin to ProfileBookmark

Change label color on input focus


Here’s a sample form:

[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<title>Sample Form</title>
<form action=”#”>
<label for=”fname”>First name</label><input type=”text” id=”fname”>
<label for=”lname”>Last name</label><input type=”text” id=”lname”>

I wonder how I can change the label color when I focus/tab on its text filed? How can I do it through JavaScript if CSS doesn’t work here?

Thanks in advance!

to post a comment

3 Comments(s)

Copy linkTweet thisAlerts:
@PadonakJun 07.2012 — [CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>Sample Form</title>
<style type="text/css">
body{text-align:center;font-family:Georgia,Verdana,Arial;font-size:13px;background-color:#fff;color:#000;padding:150px 0px 0px 0px;margin:0px 0px 0px 0px;}
<script type="text/javascript">
function setInputs(){
var frm=document.myform;
<form name="myform" action="">
<label for="fname">First name</label><input type="text" id="fname" name="fname">
<label for="lname">Last name</label><input type="text" id="lname" name="lname">
Copy linkTweet thisAlerts:
@Rain_LoverauthorJun 08.2012 — Thanks!

[I]previousSibling[/I] is a clever idea!
Copy linkTweet thisAlerts:
@JMRKERJun 09.2012 — Why the cross-forum posts?

See: http://www.codingforums.com/showthread.php?t=263909

Also could do this for same effect...
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;title&gt;Sample Form&lt;/title&gt;
&lt;style type="text/css"&gt;

&lt;form action="#" onsubmit="return false"&gt;
&lt;label id="fname"&gt;First name
&lt;input type="text"
&lt;label id="lname"&gt;Last name
&lt;input type="text"


Help @Rain_Lover 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 11.28,
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: @bahaedd,
tipped: article
amount: 1000 SATS,

tipper: @Balmasexy,
tipped: article
amount: 1000 SATS,

tipper: @mbsaad,
tipped: article
amount: 1000 SATS,