Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS form focus help please! =(

    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!

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,306
    Thanks
    29
    Thanked 277 Times in 271 Posts
    Quote Originally Posted by kingofqueensk View Post
    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?

    Quote Originally Posted by kingofqueensk View Post
    "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?

    Quote Originally Posted by kingofqueensk View Post
    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:

    Code:
    <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');">
    Code:
    *#label, *#whatever { /* normal style */ }
    *#label.sibling_focused, *#whatever:focus { /* focused style */ }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder Deacon Frost's Avatar
    Join Date
    Feb 2008
    Location
    Between the Lines
    Posts
    279
    Thanks
    31
    Thanked 4 Times in 4 Posts
    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.

    Code:
    <input type="text" class="tboxes" />
    Code:
    .tboxes input:focus {
    color:#FF9900;
    }
    The logical order of naming your CSS (bits?) is '#id .class element:useraction'.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,306
    Thanks
    29
    Thanked 277 Times in 271 Posts
    Quote Originally Posted by Deacon Frost View Post
    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".

    Quote Originally Posted by Deacon Frost View Post
    Code:
    <input type="text" class="tboxes" />
    Code:
    .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.

    Quote Originally Posted by Deacon Frost View Post
    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:

    Code:
    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|
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •