Hi guys,
To my knowledge [feel free to clear me up on this anyone if they know
better] there isn't a selector that will select the parent based on
what is contained within it... this would be truly useful however if
you could put something like an XPAth query so say:
div[span.something a:hover] {}
Saying select the div which contains a span which has an anchor tag in
hover state and apply this style to it... alas we won't be here any
time soon as looking at the spec for CSS3 this isn't even on the radar
as a selector so we might have to wait for CSS4 - coming to a browser
near you in about 2011 I reckon!
Ben's rule that he've given above only selects the input box, and this
doesn't work in IE6 as it doesn't have child selectors.
As such Javascript is the only real way to do this effectively, but it
doesn't have to be longwinded with lots of onFocus=, onBlur= type
stuff, an onLoad with some event handlers will do the job nice and
quickly for you and if Javascript isn't on you won't get the focus even
but you're no worse off than now anyway... [usual caveats about
necessary info or functionality being dependent on javascript apply
here]
The code follows below - note that this is just prototype, there is no
error checking or browser qualification on this, but that is trivial
anyway and just clouds the code.
<html>
<head>
<style type="text/css">
div { padding : 20px; margin: 20px; border: 1px solid green; }
div.focus { border: 3px solid red; }
</style>
<script type="text/javascript">
function AddEventHandlersToInputs() {
var nodelist = document.getElementsByTagName("input");
for (var i=0; i<nodelist.length; i++) {
if (nodelist[i].className == "focussable") {
nodelist[i].onfocus = focus;
nodelist[i].onblur = blur;
}
}
}
function focus() {
this.parentNode.className='focus';
}
function blur() {
this.parentNode.className ='';
}
</script>
</head>
<body onLoad="AddEventHandlersToInputs()">
<div id="container">
<input type="text" name="test1" class="focussable"/>
</div>
<div id="container">
<input type="text" name="test1" class="focussable"/>
</div>
</body>
</html>
If you set the input's classname to "focussable" it will pick it up in
the onLoad function, add an event handler for the focus and blur events
and then do what you want. You then define the parent container's focus
state to be whataever you want it to do and off you go.
Cheers
AndrewF
Ben C wrote:
On 2006-12-29, pl***@newsreaders.com <pl***@newsreaders.comwrote:
Hi,
I'd like to have a rollover like effect when a input field has the
focus, any idea of how to do this with just CSS (easy enough with
javascript)?
What I'm thinking of is having a tips box show up next to the input
field, but only when the field actually has focus.
I was thinking if there's any way to make the focus apply to a
surrounding div or span that would do it, but it doesn't look like
Firefox at least works that way...
It worked for me. You need to use a child selector:
div input:focus
{
border: 2px solid red;
}
This means a div that's a parent of a focussed input gets the border. If
child selectors prove too sophisticated for IE, you can use a descendent
selector instead:
div input:focus
{
border: 2px solid red;
}
which means any div with a descendent (including grandchildren etc.)
gets the red border.