...

View Full Version : Change input border on rollover?



fuzzy1
02-14-2008, 05:33 PM
Hey All,
As it appears that the hover pseudo class is not supported for input elements pre IE7 (and others)
I was wondering if there wasn't another way?
The following works, but it gets sloppy quickly.


<style>
input {
border:1px solid #fff;
background-color:red;
}
.inputH {
background-color: #fff;
border: thick solid #FF0000
}
</style>

<input type='text' onmouseover="this.className='inputH'" onmouseout=this.className='' size='8' >
Is it possible to apply the javascript to an entire css class?

<input type='text' class = 'myHoverClass'>

jcdevelopment
02-14-2008, 06:00 PM
Im not sure of this answer, so this goes to all who look at this post also. Could you do this to fix the bug?




a input {
border:1px solid #fff;
background-color:red;
}


a:hover input {
background-color: #fff;
border: thick solid #FF0000
}





<a href="#"><input type='text' ></a>


i dont think that would work but i was wondering if it would or not??

fuzzy1
02-14-2008, 07:27 PM
Thanks JC development,

Sadly, that doesn't seem to work, but I did workout something of an improvement to my js solution (which I think I like better than having to wrap all my inputs with <a href="#"></a> anyway). Still not really a CSS solution, but the following suits my purposes pretty well.

<style>
input {
border:none;
}
</style>
<script>
window.onload = function()
{
var input = document.getElementsByTagName("input");
if(input.type='text'){
for (var i=0;i<input.length;i++) {
input[i].onmouseover = function()
{this.style.border = "inset";}
input[i].onmouseout = function()
{this.style.border = "none";}
}
}
}
</script>
<input type='text' >

jcdevelopment
02-14-2008, 07:56 PM
ahhh, thats a good one, i didnt think it would work but i was also interested in any feedback from others too see if it works. Thats a good notation to know though, glad you figured it out!!

jerry62704
02-14-2008, 08:18 PM
I'm not sure if your choice of "myHoverClass" indicates you have been here, but if not take a look at this: http://www.xs4all.nl/~peterned/hovercraft.html

oldcrazylegs
02-26-2008, 11:31 PM
Here is another way

.on {border:1px solid #fff;
background-color:red;
}
.off {
background-color: #fff;
border: thick solid #FF0000
}

<input type="text" class="on" onmouseover="this.className='off'" onmouseout="this.className='on'" />

And another. Just change the script to border color.

<script type="text/javascript">
<!--
function hilite(obj) {
obj.style.background = '#ffccff'
}
function delite(obj) {
obj.style.background = '#ffffff'
}
//-->
</script>

<input type="text" size="30" style="background-color:white;" onfocus="hilite(this)" onblur="delite(this)">


You can do several things at once by adding them on to the end and seperating them with a semi-colon.

<script type="text/javascript">
<!--
function hilite(obj) {
obj.style.background = '#ffccff'; obj.style.bordercolor = '#ffccff';
}
function delite(obj) {
obj.style.background = '#ffffff'; obj.style.bordercolor = '#000000';
}
//-->
</script>

<input type="text" size="30" style="background-color:white;" onfocus="hilite(this)" onblur="delite(this)">

masterofollies
02-26-2008, 11:57 PM
Inigoesdr just did this on my website. You could PM him and ask him about it. He did excellent work.

fuzzy1
02-27-2008, 01:59 PM
Thanks All,
Actually jerry62704's suggestion wins the prize here. Had pretty much implimented already in my style sheet, but at time of posting couldn't figure out why it wouldn't work.

Added behavior and Viola! I now have hover pseudo class functionality for IE browsers.

body {
behavior:url("csshover.htc");
}

Also, thanks to oldcrazylegs. I'm uncomfortable however with any approach which adds complexity to the formation of each input beyond "class=x" -- especially in long, multipart or otherwise complex forms which would require many such complex inputs. (Just a thought.)

Apostropartheid
02-27-2008, 05:24 PM
Behavio(u)r isn't valid CSS, though, which we generally, well, like. But...

<!doctype html>
<html lang="en">
<!-- rest of your code -->
<link rel="stylesheet" type="text/css" href="/styles.css" />
<!--[if lte IE 6]>
<style>
body {
behavior: url(csshover.htc);
}
</style>
<![endif]-->
<!-- body code -->
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum