473,320 Members | 1,879 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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 13433
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: KS | last post by:
If I have a button like this. <input type="button" name="foo" value="HIT ME" title="HIT ME HARD" /> If I move the cursor over it the title get displayed. I want the title to get displayed when the...
2
by: jimbo_vr5 | last post by:
Hey I think i've figured out the idea behind apply-templates. But going through the tutorial on <http://www.w3schools.com/xsl/xsl_apply_templates.asp> theres simply just something that i dont...
5
by: tfs | last post by:
How do I set a field on my screen to get focus when the page opens? Thanks, Tom Posted Via Usenet.com Premium Usenet Newsgroup Services...
1
by: epigram | last post by:
I've got the following sytle: input.bigRadio { width: 45px; height: 45px; padding: 0px 0px 0px 0px} which I am applying to radio buttons to make them larger by applying this bigRadio class as...
4
by: Johannes Kiehl | last post by:
Hi group, I've been losing most of my remaining hair today, trying to track down a problem with IE6.0 (builds: .2600 and XP SP 2). I set the border-width of form input fields to 1px via...
3
by: jab3 | last post by:
Hello. I"m new to this group, and to JavaScript in general, so please forgive me if I breach local etiquette. I'm trying to implement some client-side 'dynamic' validation on a form. I'm having...
11
by: Dan | last post by:
Newbie question... Is it better coding to use <span class=bold>...</span> around text to which I want to apply an inline bold style rather than <b>... </b> ? If so, why?
37
by: JohnGoogle | last post by:
Hi, Newbie question... After a recent article in VSJ I had a go at implementing a Fraction class to aid my understanding of operator overloading. After a previous message someone suggested...
4
by: joecap5 | last post by:
I have a main window and a menu window. The menu window is opened from the main window by clicking on "Open Menu". A google window can also be opened from the main window by clicking "Open Google"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.