Form li background change

Question

I'm trying to achieve the effect of the li tag changing background colors when the user focuses on the input (effect can be seen at the bottom of the page here. From seeing similar questions it seems like it can't be done in pure CSS, so I was wondering how to do it in jquery (I have no knowledge). Here is my HTML:

<form class="contact-form" action="" method="post" name="contact-form">  
        <ul>   
            <li>
                <input type="text" name="name" placeholder="NAME" class="test"/>
            </li>
            <li>
                <input type="email" name="email" placeholder="EMAIL" />
            </li>
            <li>
                <textarea name="message" name="message" placeholder="MESSAGE"></textarea>
            </li>
            <li>
                <button class="submit" type="submit">Send</button>
            </li>
        </ul>
    </form>

Also, possible duplicate of: http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child — Jeff-Meadows, Feb 12 '13 at 00:20
@vytfla take a look at my answer, includes the fading effect from the example given. — AbstractChaos, Feb 12 '13 at 10:12
@AbstractChaos I believe I am missing something then. I have in my tag followed by your code within — vytfla, Feb 12 '13 at 18:19
@vytfla you are missing [jquery ui](http://jqueryui.com/) required to allow background to fade — AbstractChaos, Feb 12 '13 at 18:45
So, essentially what I posted above, but instead between the script tag add http://code.jquery.com/ui/1.10.0/jquery-ui.js? — vytfla, Feb 12 '13 at 20:12
not instead, as well as you need both, Jquery UI is a extension of Jquery. — AbstractChaos, Feb 13 '13 at 10:51

Jeff Miller · Answer 1 · 2013-02-12T02:44:14.830

Here's how to do it. It will add a background color to the parent LI of the form field that has focus, and after exiting the field the background color will be removed.

Working example on jsFiddle.

CSS:

.selected {
    background: lightYellow;
}

jQuery:

$(function () {
    var $form = $(".contact-form"),
        selectedClass = "selected";

    $form.on("focus", "input, textarea", function () {
        $(this).closest("li")
            .addClass(selectedClass);
    });

    $form.on("blur", "input, textarea", function () {
        $(this).closest("li")
            .removeClass(selectedClass);
    });
});

Marcelo C. · Answer 2 · 2013-02-12T05:17:26.013

0

You can use the :hover selector in your CSS statement; no need for JS at all..

.contact-form ul li { background-color:#000000; }
.contact-form ul li:hover { background-color: #C0C0C0; }

edited Feb 12 '13 at 05:17

answered Feb 12 '13 at 00:25

Marcelo C.

118
2
10

This isn't supported in IE 6 & 7. – Jeff Miller Feb 12 '13 at 02:34
Man I wasn't thinking, this is useful and good alternative. Thanks. – vytfla Feb 12 '13 at 06:11
@htmled yeah... you're likely right. I stopped supporting IE6 and IE7 about 2 years ago. – Marcelo C. Feb 12 '13 at 22:14

score 0 · Answer 3 · answered Feb 12 '13 at 00:33

Heres a basic jquery version which activates on focus like example

$('.contact-form').on('focus','input,textarea',function() {
    $('.contact-form li').animate({'backgroundColor':'#00FF00'});

    $(this).parent().animate({'backgroundColor':'#FF0000'});
});

fiddle

Form li background change

3 Answers3