SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE7 font color (:focus)

    I noticed another IE7 display issue here:
    www.kimstewart.ca/contact/
    In IE7, the color on the input when you click into it doesn't change to white like it does in Firefox.

    And I believe it has something to do with .faded:focus.
    :focus doesn't work on forms in IE6/IE7, does it?

    I'm looking for a way to have this resolved for IE, and should this be posted in the JavaScript forum or can it be done strictly with CSS?

    Cheers,
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    IE 7 and below do not support :focus.
    Would need to use JavaScript for this.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, logic_earth

    Do you know the JavaScript I will need to use to fix this?

    Cheers,
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  4. #4
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This thread will probably get moved. Or if you post to the javascript forum you'll get a much better answer then what I'm about to give:

    If you loop through all of the form input elements and assign event handlers to each input that want a different background color then it should work. Here's a very simple solution that you'll probably need to tweak:
    html
    <style type="text/css">
    input{
    background-color: #333;
    }

    </style>
    <script src="practice.js" type="text/javascript"></script>
    </head>
    <body>
    <div>
    <form>
    <input type="text">
    </form>
    </div>
    </body>
    js
    window.onload = changeColor;

    function changeColor(){

    var inputs = document.getElementsByTagName("input");

    for(var i = 0; i < inputs.length; i++){

    inputs[i].onclick = colorC;

    }
    }

    function colorC(){
    this.style.backgroundColor = "red";
    }

  5. #5
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <input type="text" onfocus="this.style.color='#F00';" onblur="this.style.color='#000';">
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.



Bookmarks

Posting Permissions

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