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 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Simple CSS colour change

    I have this:

    http://page-test.co.uk/a.php

    ....but want to change the red background of .outer to blue, rather than changing the colour of the text in the input box.

    So I'm guessing this:
    Code:
    .outer input:focus {
    	color:blue;
    }
    ...needs to be something like:
    Code:
    .outer input:focus .outer {
    	background-color:blue;
    }
    (although that doesn't work)

  • #2
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    The CSS input:focus will affect input tags within the scope of the .outer class.

    I don't know how to do what you're wanting without some scripting. But then, I'm certainly not a CSS expert.

    Perhaps someone else has the answer.

    Will
    Numerology API for apps - Facebook, iPad, mobile phones. No charge to use API. [info]

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    It is not possible with CSS to target a parent element.

    It is possible using positioning to make the larger red area the next sibling element to the input and target that with css, or format the input itself so that it has a very large background (with padding and width to position the input area itself). Both of these solutions are messy and a little bit of JavaScript or jQuery is probably an easier, and better, solution.

    Code:
    // jQuery example - off the top of my head:
    $('.outer input').focus(function () {
        $(this).parent('div').css('background-color','blue');
    });
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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