Form background-color change on focus

Vytfla · 02-08-2013, 01:15 AM

I'm trying to achieve this effect (http://secondandpark.com/ - contact form, bottom of page) that when the user focuses on an input field the background of the input changes colors. Is there a pure CSS way of doing it? If not, what are my options? Here is my code:

Code:

<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>

Code:

.contact-form {
    margin: 40px 0;
    width: 340px;
}

.contact-form ul {
    list-style: none;
}

.contact-form li {
    padding: 15px;
}

.contact-form input {
    padding: 10px 160px 10px 10px ;   
}

.contact-form textarea {
    padding: 10px 160px 100px 10px;
}

.contact-form button {
    float: right;
}

The only thing I can think of is a li:focus, but clearly that doesn't work.

LearningCoder · 02-08-2013, 08:05 AM

Hey dude,

You need a way to target the <li> but when you click on either an input or textarea. You wouldn't set the :focus psuedo on the <li> but rather on the inputs and textarea. There's only one way I would know how to achieve this.

Are you familiar with jQuery at all?

I just wrote this for you and it's got the exact same functionality.

Code:

$(function(){
    $('input,textarea').focus(function(){
        $(this).closest('li').css("background", "red");
    });
    
    $('input,textarea').focusout(function(){
        $(this).closest('li').css("background", "none");
    });
    
});

Maybe it could be done with just CSS though I am not sure.

I hope this helps you.

Kind regards,

LC.

jerry62704 · 02-08-2013, 02:06 PM

Have you considered adding this:

li input:hover {background-color:blue;}

Vytfla · 02-11-2013, 12:26 AM

Quote:

Originally Posted by jerry62704

Have you considered adding this:

li input:hover {background-color:blue;}

I should clarify,I don't mean the background of the actual input, but the background of the <li> tag as defined by the padding, just like in the site. Your method changes the input background.

Vytfla · 02-11-2013, 12:27 AM

Quote:

Originally Posted by LearningCoder

Hey dude,

You need a way to target the <li> but when you click on either an input or textarea. You wouldn't set the :focus psuedo on the <li> but rather on the inputs and textarea. There's only one way I would know how to achieve this.

Are you familiar with jQuery at all?

I just wrote this for you and it's got the exact same functionality.

Code:

$(function(){
    $('input,textarea').focus(function(){
        $(this).closest('li').css("background", "red");
    });
    
    $('input,textarea').focusout(function(){
        $(this).closest('li').css("background", "none");
    });
    
});

Maybe it could be done with just CSS though I am not sure.

I hope this helps you.

Kind regards,

LC.

So I'm not familiar with js/jquery, would this code go at the bottom of my HTML right before the </body> tag?

EDIT: Or do I put it at the bottom within a <script> tag? Because I tried this and it's not working either

Code:

<script type="text/javascript">
        $(function(){
            $('input,textarea').focus(function(){
                $(this).closest('li').css("background", "blue");
            });
            
            $('input,textarea').focusout(function(){
                $(this).closest('li').css("background", "none");
            });
    
        });
    </script>

LearningCoder · 02-11-2013, 12:44 AM

I would put it in the <head> tag but you could also add it before the closing </body> tag.

You will need to link this between your <head></head> tags, in your HTML page:

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

This gives you access to the jQuery library, hosted on google.

Something like this:

Code:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript">
        $(function(){
            $('input,textarea').focus(function(){
                $(this).closest('li').css("background", "blue");
            });
            
            $('input,textarea').focusout(function(){
                $(this).closest('li').css("background", "none");
            });
    
        });
    </script>
</head>
<body>

</body>
</html>

Kind regards,

LC.

Vytfla · 02-12-2013, 12:01 AM

Hm nope, that doesn't seem to work either

LearningCoder · 02-12-2013, 12:38 AM

It should work, I had it working exactly like the site.

Can you post all of your updated code?

Regards,

LC.

Vytfla · 02-12-2013, 06:17 PM

Quote:

Originally Posted by LearningCoder

It should work, I had it working exactly like the site.

Can you post all of your updated code?

Regards,

LC.

HTML section

Code:

<div id="contact">
        <h2>Contact</h2>
        
        <div id="contact-info">
            <h3>LET&rsquo;S TALK!</h3>
            
            <p>Let&rsquo;s talk about soup! Let&rsquo;s talk about cooking! Let&rsquo;s talk about the weather! Let&rsquo;s talk about» anything! I love chatting, so please contact me via the form on the right to ask any questions about my soups or any general inqueries, or even to request something special. Don&rsquo;t by shy! I&rsquo;ll have my assistant (aka ME!) get back to you as soon as possible. Also, I am crazy about social media so don't forget to follow me on the social sites below for news and updates. I look forward to hearing from you!</p>
            
            <p>-MAMA Z</p>
        </div>
        
        <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> 
    </div>

CSS

Code:

/*=================================== BODY ================================*/
body {
    background-color: #e96151;
    font-size: 62.5%;      /* 1em = 10px */
    font-family: Georgia, serif;
    min-width: 1000px;
}

::-moz-selection {
    background-color: #fbbdb6;
    color: #fff;
}

::selection {
    background-color: #fbbdb6;
    color: #fff;
}

*:focus {
    outline: none;      /*Removes focus on forms*/  
}





/*=================================== HEADER ================================*/
#header {
    width: 960px;  
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#header img {
    float: left;
    display: inline;
}

#logo-home {
    position: absolute;
    display: block;
    background: url("images/logo.png") left;
    left: 75px;
    width: 51px;
    height: 74px;
}
#logo-home:hover {
    background-position: right;
}

#nav li {
    list-style: none;
    display: inline;
    margin: 0 5px 0 0;
    padding: 0 0 10px 80px;
    /*border-bottom: 1px solid white;*/
}

#nav a {
    text-decoration: none;
    color: #ffffff;
    font-family: 'josefin_slabregular';
    font-size: 1.8em;
    letter-spacing: .3em;
}
#nav a:hover {
    border-bottom: 1px solid white;
}

#nav ul {
    float:right;
    margin: 30px 0 0 0;
}





/*=================================== HEADER ================================*/
#intro {
    height: 294px;
    background-image: url(images/banner-bg.png);
    max-width: 2048px;
    border-bottom: 2px solid #fff;
    margin: -80px auto 0;
    -o-box-shadow:      0px 6px 10px rgba(50, 50, 50, 0.75);
    -webkit-box-shadow: 0px 6px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 6px 10px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 6px 10px rgba(50, 50, 50, 0.75);
}

#heading {
    width: 960px;
    margin: 0 auto;
}

h1 {
    padding: 2px 0 2px 5px;
    font-size: 3.6em;
    font-family: 'vollkornregular';
    line-height: .9;
    letter-spacing: .06em;
    background-color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    color: #366774;
    position: relative;
    top: 50px;
    left: 180px;
    border-bottom: 4px solid #fbbdb6;
    width: 310px;
}
h1:nth-child(2) {
    width: 600px;
}
h1 + h1 {
    width: 600px;
}
h1:nth-child(3) {
    width: 700px;
}
h1 + h1 + h1 {
    width: 700px;
}

span {
    font-family: 'vollkornbold';
    
}





/*=================================== MAIN ================================*/
#main {
    width: 960px;
    margin: 40px auto 0;
}

h2 {
    font-family: 'vollkornregular';
    font-size: 2.4em;
    text-decoration: underline;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.2em;
    color: #fff;
    background: url(images/header-bg.png);
    padding: 10px;
    margin: 0 auto;
    width: 300px;
}

h3 {
    font-family: 'vollkornregular';
    color: #366774;
    font-size: 1.8em;
    margin: 20 auto;
    letter-spacing: 0.1em;
}

#content {
    overflow: hidden;
    text-align: center;
}

#content p {
    font-family: 'josefin_slabregular';
    font-size: 1.6em;
    color: #366774;
    font-weight: 100;
}

#content a,
#about a {
    text-decoration: none;
    color: #e96151;
}
#content a:hover,
#about a:hover {
    text-decoration: underline;
}

.featured {
    float: left;
    width: 310px;
    height: 280px;
    background-color: #fff;
    background: url(images/washi.png);
    border-bottom: 8px solid #fbbdb6;
    margin: 40px 5px 0;
    position: relative;
}

.featured-images {
    display: block;
    margin: 6px auto 0;
    -o-box-shadow:      3px 3px 10px rgba(50, 50, 50, 0.75);
    -webkit-box-shadow: 3px 3px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    3px 3px 10px rgba(50, 50, 50, 0.75);
    box-shadow:         3px 3px 10px rgba(50, 50, 50, 0.75);
}

.featured p + p {
    position: absolute;
    bottom: 0;
    left: 120px;
}




/*=================================== ABOUT ================================*/
#about {
    background: url(images/washi.png);
    margin: 40px 0;
    padding: 0 0 80px 0;
}

#about-info {
    width: 960px;
    overflow: hidden;
    margin: 0 auto;animation:
}

#about h2 {
    position: relative;
    top: 40px;
}

#about img {
    float: left;
    margin: 100px 0 0 60px;
}

#about p {
    float: right;
    width: 480px;
    margin: 110px 0 0 0;
    line-height: 1.8em;
    font-family: 'josefin_slabregular';
    font-size: 1.8em;
    color: #366774;
}


/*=================================== ABOUT ================================*/
#contact {
    width: 960px; 
    margin: 0 auto;
    overflow: auto;
}

#contact-info {
    float: left;
    width: 500px;
}

#contact-info h3 {
    font-size: 3.6em;
}

#contact-info p {
    color: #fff;
    font-family: 'josefin_slabregular';
    font-size: 1.8em;
    line-height: 1.8;
}

#contact-info p:nth-child(3) {
    text-align: right;
}

.contact-form {
    float: right;
    margin: 40px 0;
    width: 380px;
}

.contact-form ul {
    list-style: none;
}

.contact-form li {
    padding: 15px;
}

.contact-form input {
    padding: 10px 168px 10px 10px ;
}

.contact-form textarea {
    padding: 10px 160px 100px 10px;
}

.contact-form button {
    float: right;
    margin: 0 40px 0 0;
}

input,
textarea {
    background-color: #366774;
    border: none;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
    -webkit-box-shadow: 4px 4px 15px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    4px 4px 15px rgba(50, 50, 50, 0.75);
    box-shadow:         4px 4px 15px rgba(50, 50, 50, 0.75);
}

LearningCoder · 02-12-2013, 06:45 PM

It's not working because you haven't linked the jquery file, or copied my code and placed it in your document.

Regards,

LC.

Vytfla · 02-12-2013, 08:17 PM

Quote:

Originally Posted by LearningCoder

It's not working because you haven't linked the jquery file, or copied my code and placed it in your document.

Regards,

LC.

This is what I have in my head tag:

Code:

<head>
        
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

    <script type="text/javascript">
        $(function(){
            $('input,textarea').focus(function(){
                $(this).closest('li').css("background", "blue");
            });
            
            $('input,textarea').focusout(function(){
                $(this).closest('li').css("background", "none");
            });
    
        });
    </script>
    
    
    <title>Lorem Ipsum</title>
    
    <meta charset="utf-8" />
    
    <!--[if gt IE 7]>
	<link rel="stylesheet" type="text/css" href="style.css" />
    <![endif]-->
    <!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="ie7.css" />
    <![endif]-->
    
    <!--[if !IE]><!-->
	<link rel="stylesheet" href="style.css" />
    <!--<![endif]-->
    <link rel="stylesheet" href="normalize.css" />
</head>

felgall · 02-12-2013, 09:52 PM

Almost all JavaScript works best when attached just before the </body> tag as then the page appears to load a lot faster.

Suck a trivial task as this is best done directly with JavaScript rather than dragging in the entire JQuery library. It does require perhaps three times the amount of code to be written that calling JQuery would but you get rid of the thousands of lines of unneeded code from JQuery that you are not even using.

Possibly the following (untested) code will do it without the need for JQuery at all:

Code:

closest = function(nd,tg) {
while (nd.nodeName !== tg) nd = nd.parentNode;
return nd;
}
inp = document.getElementsByTagName('input);
txt = document.getElementsByTagName('textarea');
for (i = inp.length-1; i>=0,i--) {
   inp[i].onfocus = function() {closest(this,'li').style.backgroundColor = 'blue';};
   inp[i].onblur = function() {closest(this,'li').style.background = 'none';};
}
for (i = txt.length-1; i>=0,i--) {
   txt[i].onfocus = function() {closest(this,'li').style.backgroundColor = 'blue';};
   txt[i].onblur = function() {closest(this,'li').style.background = 'none';};
}

tempz · 02-13-2013, 12:13 AM

This should work.

Code:

#Field3:focus {background: #colorhexcode;}

felgall · 02-13-2013, 09:27 PM

Quote:

Originally Posted by tempz

This should work.

Code:

#Field3:focus {background: #colorhexcode;}

<li> tags never get the focus so that condition would never be applied.

CSS doesn't provide a way to style the <li> based on that an <input> within it has the focus - the only way to do it is with JavaScript.