Simple CSS colour change

HTML & CSS
1

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:


.outer input:focus {
	color:blue;
}

…needs to be something like:


.outer input:focus .outer {
	background-color:blue;
}

(although that doesn’t work)

2

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

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

This sounds like my kind of party.

If you just rearrange the HTML a little bit…


<div class="outer">
    <div class="innerA">Hello</div>
    <input type="text" value="default text" />
    <div class="innerB"></div>
</div>&#8203;

…and complicate the CSS the tiniest smidge…


.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!

i[/i] GASP! And what’s more, it even looks like it might work on Blackberry!

5

Nice work, calonice. :slight_smile: