Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

PB. How to change the class on <INPUT> on event like onFocus?

0 views
Skip to first unread message

David CHAUMONT

unread,
Mar 26, 2001, 5:44:38 PM3/26/01
to
Questions:
1. Why MyInput:focus doesn't work on <Input> ?? (It works fine on <A HREF ....)
2. I imagine that it the same reason that
this.className="MyInputFocus";
doesn't work either.
3. So I can do it on javascript, but it's not what I expected (This one is not really a question)


Thanks

David


/**********************************************
CSS
***********************************************/
.MyInput {
FONT-SIZE: 16px;
COLOR: #888888;
FONT-FAMILY: arial,san-serif;
TEXT-DECORATION: none;
background: #ffffff;
BORDER-TOP:SOLID #FFFFFF 1px;
BORDER-RIGHT:SOLID #FFFFFF 1px;
BORDER-BOTTOM:SOLID #FFFFFF 1px;
BORDER-LEFT:SOLID #FFFFFF 1px;
}

.MyInput:focus {
background: #F2F1BB;
BORDER-TOP:SOLID #DDDDDD 1px;
BORDER-RIGHT:SOLID #DDDDDD 1px;
BORDER-BOTTOM:SOLID #DDDDDD 1px;
BORDER-LEFT:SOLID #DDDDDD 1px;
color: #333333;
}


.MyInputFocus {
background: #F2F1BB;
BORDER-TOP:SOLID #DDDDDD 1px;
BORDER-RIGHT:SOLID #DDDDDD 1px;
BORDER-BOTTOM:SOLID #DDDDDD 1px;
BORDER-LEFT:SOLID #DDDDDD 1px;
color: #333333;
}


/************************************************
HTML File
*************************************************/
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="myCss.css"/>
<script language="Javascript">
function setFocus(obj)
{
obj.style.background = "#F2F1BB"; //"#F2D251";
obj.style.borderTop = "SOLID #DDDDDD 1px";
obj.style.borderRight = "SOLID #DDDDDD 1px";
obj.style.borderBottom = "SOLID #DDDDDD 1px";
obj.style.borderLeft = "SOLID #DDDDDD 1px";
obj.style.color = "#333333";

//this.className="MyInputFocus";
}

function resetFocus(obj)
{
obj.style.background = "#FFFFFF";
obj.style.borderTop = "SOLID #FFFFFF 1px";
obj.style.borderRight = "SOLID #FFFFFF 1px";
obj.style.borderBottom = "SOLID #FFFFFF 1px";
obj.style.borderLeft = "SOLID #FFFFFF 1px";
obj.style.color = "#888888";

//this.className="MyInput";
}

</script>
</HEAD>
<BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 bgcolor=#eeeeee>
<br>
<br>
<table width=100%>
<tr>
<th width=20% align=left ><input class="MyInput" Name=inp1 size=10 onfocus="setFocus(this);" onblur="resetFocus(this);" /></th>
</tr>
<tr>
<th width=20% align=left ><input class="MyInput" Name=inp2 size=10 onfocus="setFocus(this);" onblur="resetFocus(this);" /></th>
</tr>
</table>
</BODY>
</HTML>

AlanZ

unread,
Mar 27, 2001, 5:06:20 PM3/27/01
to
This of course would not be a problem if MS supported the :focus pseudo
class like mozilla does... =(

You should be able to do something like:

input[type="text"] {
background-color: #ccc;
}
input[type="text"]:focus {
background-color: #fff;
}

try it out in mozilla.


0 new messages