CSS code... I THINK!

[MuMu]

I need a css code or java-script (don't know exactly) to help me with my problem.

I want this: when I click INSIDE an INPUT box, the background color to chage to RED for examble, and when I click outsite the INPUT box, the background color should change back to white. :D

mmmmmmmm... can anyone help me with this!?

Thanks!

[Twey]

document.onclick = function(e) {
var ev = e || window.event;
if((ev.target || ev.srcElement).tagName.toLowerCase() == "input")
(ev.target || ev.srcElement).style.backgroundColor = "red";
else
for(var i = 0, e = document.getElementsByTagName("input"); i < e.length; ++i)
e[i].style.backgroundColor = "white";
};

[MuMu]

Thanks... but can you... TELL me how to use it... :eek: :eek: :confused:

Is this CSS or JAVA-SCRIPT!?

[MuMu]

when used like this...
<style type="text/css">

document.onclick = function(e) {
var ev = e || window.event;
if((ev.target || ev.srcElement).tagName.toLowerCase() == "input")
(ev.target || ev.srcElement).style.backgroundColor = "red";
else
for(var i = 0, e = document.getElementsByTagName("input"); i < e.length; ++i)
e[i].style.backgroundColor = "white";
};

</style>
... it doesn't do nothing.

Maybe I didn't expressed myself right. I have a contact form on my webpage and when visitors fill in this the files and want the "actve" INPUT BOXES (the selected one) to CHANGE COLOR.

Thanks again.

[Twey]

It's Javascript. It should be placed inside a <script> element, preferably in the head.

/EDIT: Well, if you'd said that before, it would have been easier :)


<script type="text/javascript">
window.onload = function() {
for(var i = 0, e = document.getElementsByTagName("input").toLowerCase(); i < e.length; ++i)
if(e[i].className.indexOf("nohighlight") == -1) {
e[i].onfocus = function() {
this.style.backgroundColor = "red";
};
e[i].onblur = function() {
this.style.backgroundColor = "white";
};
}
};
</script>

[MuMu]

It's Javascript. It should be placed inside a <script> element, preferably in the head.


<script type="text/JavaScript">

document.onclick = function(e) {
var ev = e || window.event;
if((ev.target || ev.srcElement).tagName.toLowerCase() == "input")
(ev.target || ev.srcElement).style.backgroundColor = "red";
else
for(var i = 0, e = document.getElementsByTagName("input"); i < e.length; ++i)
e[i].style.backgroundColor = "white";
};

</script>
Works perfect like this...
Now, just one more ajustment.... ... if you can help,...

If I click the 1st INPUT BOX the COLOR changes to RED, but when I click the 2nd INPUT BOX the COLOR on the 1st INPUT BOX doesn't CHANGE back to WHITE... can.. YOU DO THAT!? :rolleyes:

Thanks!

[Twey]

Use the latest code I posted instead.

[MuMu]

Use the latest code I posted instead.

Well... when i use the "latest" code, it give me an erros in this line
if(e[i].className.indexOf("nohighlight") == -1) {

The Error:

Line 70 (The Line Above)
Char 18
Message: Object doesn't support this property or method.

What now!? :( :( :(

[MuMu]

I've done it! Something more simple but effective...
Look at this...

onfocus="this.style.background='red'"
onblur="this.style.background='white'"

Example:

<input type="text" size="30" name="b_fullname" style="border: 1px solid #FF7A22" onfocus="this.style.background='pink'" onblur="this.style.background='#c0c0c0'">

[Twey]

Perhaps you have to use ...className.toString().indexOf(... instead in IE.

That's essentially what I was doing, but all at once :)