470,588 Members | 2,141 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,588 developers. It's quick & easy.

Focus psudo class -- apply to containing div or span?

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...and of course input isn't a
containing element, so it can't contain the tip itself.

Any ideas other than using JS?

Dec 29 '06 #1
4 13236
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.
Dec 29 '06 #2
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.
Dec 29 '06 #3
On 2006-12-29, AndrewF <an****@transitionkiteboarding.comwrote:
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.
Sorry, yes you're right, of course it does. What you need is an
"ancestor selector"-- select the div if it contains a focussed input--
but there is no such thing.

There is no way to do this with CSS. I'm fairly sure that when the
pseudo-state of a node changes (it becomes focussed, hovered etc.) only
that node, its sibling, and nodes below it and below its sibling can be
affected. If anyone knows of a counter-example I would be interested to
hear it.
As such Javascript is the only real way to do this effectively,
Yes.

[snip]
Ben C wrote:
[snip]
>div input:focus
{
border: 2px solid red;
}

This means a div that's a parent of a focussed input gets the border.
[snip]

That's wrong as you say-- it's the input that gets the border not the div.
Dec 29 '06 #4
AndrewF wrote:
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] {}
That is rather more arbitray than what I was thinking of -- I was
thinking of having the hover/active/focus states bubbling up to the
parent container.

--
J.Moreno

Jan 2 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by KS | last post: by
2 posts views Thread by jimbo_vr5 | last post: by
1 post views Thread by epigram | last post: by
4 posts views Thread by Johannes Kiehl | last post: by
11 posts views Thread by Dan | last post: by
37 posts views Thread by JohnGoogle | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.