Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    311
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Change input border on rollover?

    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.

    PHP Code:
    <style>
    input {
        
    border:1px solid #fff;
        
    background-color:red;
        }
    .
    inputH {
        
    background-color#fff;
        
    borderthick 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?
    PHP Code:
    <input type='text'  class = 'myHoverClass'
    Last edited by fuzzy1; 02-14-2008 at 06:35 PM.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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?

    Code:
    a input { 
        border:1px solid #fff; 
        background-color:red; 
        } 
    
    
    a:hover input { 
        background-color: #fff; 
        border: thick solid #FF0000  
        }
    Code:
    <a href="#"><input type='text'  ></a>
    i dont think that would work but i was wondering if it would or not??

  • #3
    Regular Coder
    Join Date
    Apr 2006
    Posts
    311
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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.
    PHP Code:
    <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' > 

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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!!

  • #5
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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

  • #6
    Regular Coder oldcrazylegs's Avatar
    Join Date
    Feb 2004
    Location
    East Moline Illinois USA
    Posts
    414
    Thanks
    4
    Thanked 5 Times in 4 Posts
    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)">
    Last edited by oldcrazylegs; 02-27-2008 at 12:56 AM.

  • #7
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Inigoesdr just did this on my website. You could PM him and ask him about it. He did excellent work.

  • #8
    Regular Coder
    Join Date
    Apr 2006
    Posts
    311
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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.)
    Last edited by fuzzy1; 02-27-2008 at 03:29 PM.

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Behavio(u)r isn't valid CSS, though, which we generally, well, like. But...
    Code:
    <!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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •