SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    It's not totally clear what you want here, but it sounds like you want the background color of the parent element to change when the input has fucus. CSS doesn't allow for styling a parent like that. There might be some tricky workarounds for this, but it's not worth it, IMHO.

    You can style a parent with JS, though.

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph.

    The problem I'm having is that the above code is actually a hover-based tooltip, but on BlackBerry touch screen browsers (tested in three different OS versions) the tooltip will close when I click in an input box. On every other browser it doesn't, so I'm guessing it just assumes the element is no longer hovered over.

    I thought it best to do it like this rather than mentioning the BB browser and complicating things. If I can somehow ensure CSS thinks .outer is still hovered when I click the input box then it should work (obviously it does in most browsers, but somehow put in extra code as though it didn't).

    I think my solution demonstrated here would work, but I'm guessing that idea isn't possible.

    I don't want to use JS.

    Thanks again.

  4. #4
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    There might be some tricky workarounds for this, but it's not worth it, IMHO.
    This sounds like my kind of party.

    If you just rearrange the HTML a little bit...

    HTML Code:
    <div class="outer">
        <div class="innerA">Hello</div>
        <input type="text" value="default text" />
        <div class="innerB"></div>
    </div>
    ...and complicate the CSS the tiniest smidge...

    Code css:
    .outer { border:1px solid black; position:relative; overflow:hidden }
    .innerA { position:relative; z-index:2 }
    .outer input { position:relative; z-index:3 }
    .innerB { position:absolute; top:0; width:100%; height:1000px; background-color:red; z-index:1 }
    .outer input:focus + .innerB { background-color:blue }

    ...then it's totally doable! Here's a working example. And just take a look at these fabulous prizes!

    • Bloated, Unsemantic Markup Hopefully you're charging by the letter ;D
    • Complicated CSS Positioning Ensures you'll have no idea what you were doing when you come back to it six months later!
    • Adjacent Child Selector Never worry about IE again!


    (edit) GASP! And what's more, it even looks like it might work on Blackberry!
    Last edited by calonice; Sep 11, 2012 at 21:41. Reason: stuff about bb

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Nice work, calonice.


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
  •