...

View Full Version : CSS form focus help please! =(



kingofqueensk
11-22-2009, 02:35 AM
Hi there,

I've been battling to get this right...basically I have the following HTML setup:


<input class="tboxes" type="textbox" />
<input class="tboxes2" type="textbox" />


"span.label01" is an inline element, and appears to the left of the textbox "input.tboxes". What I am trying to do attach some style to "span.label01" AND "div.box10" when the textbox receives focus.

I have tried the following CSS code:

input.tboxes:focus {
color:#FF9900;
}

input.tboxes2:focus {
color:#FF9900;
}
but nothing happens. I know this is a CSS selector issue, but I just can't seem to get it right. I have even tried adjacent sibling selectors, and nothing. Can anyone help me here? TIA!

Arbitrator
11-22-2009, 07:56 AM
I've been battling to get this right...basically I have the following HTML setup:


<input class="tboxes" type="textbox" />
<input class="tboxes2" type="textbox" />textbox is not a correct value for the type attribute but text is. Typo?


"span.label01" is an inline element, and appears to the left of the textbox "input.tboxes".You're using label elements to mark up your label text, right?


What I am trying to do attach some style to "span.label01" AND "div.box10" when the textbox receives focus.As far as I'm aware, this isn't possible without scripting. You could use:


<label id="label" for="whatever">Label Text</label>
<input id="whatever" type="text" onfocus="document.getElementById('label').setAttribute('class', 'sibling_focused');" onblur="document.getElementById('label').removeAttribute('class');">


*#label, *#whatever { /* normal style */ }
*#label.sibling_focused, *#whatever:focus { /* focused style */ }

Deacon Frost
11-22-2009, 10:51 AM
http://www.w3.org/TR/CSS21/selector.html - Says :focus can be applied.

I think you just have a css syntax error, but I can't be sure as I've never used that user action.



<input type="text" class="tboxes" />




.tboxes input:focus {
color:#FF9900;
}


The logical order of naming your CSS (bits?) is '#id .class element:useraction'.

Arbitrator
11-22-2009, 11:35 AM
I think you just have a css syntax error, but I can't be sure as I've never used that user action.Presumably, you mean pseudo-class by "user action".




<input type="text" class="tboxes" />




.tboxes input:focus {
color:#FF9900;
}
I believe he was trying to apply stylistic changes to sibling and ancestor elements of the focused element, not to the focused element itself.

Also, unless an ancestor element was part of the tboxes class, your selector wouldn't select anything. Not sure if such an ancestor element was supposed to have been implied since your input element is part of that class.


The logical order of naming your CSS (bits?) is '#id .class element:useraction'.For "bits", you're probably looking for the term "simple selector".

That order is wrong though; it's element#id.class:pseudo-class where #id and one or more of .class can have their order interchanged:


element#id { ... /* all elements named |element| with ID |id| */
*#id { ... /* all elements with ID |id| */
#id { ... /* all elements with ID |id| */
*#id.class { ... /* all elements with ID |id| and class |class| */
*.class1#id.class2 { ... /* all elements with ID |id| and classes |class1| and |class2|*/
element.class1:hover:focus { ... /* all elements named |element| with class |class1| and pseudo-classes |hover| and |focus|
element { ... /* all elements named |element|



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum