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 14 of 14
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Form background-color change on focus

    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.

  • #2
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    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.
    Last edited by LearningCoder; 02-08-2013 at 08:10 AM.

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Have you considered adding this:

    li input:hover {background-color:blue;}
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #4
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jerry62704 View Post
    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.

  • #5
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by LearningCoder View Post
    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>
    Last edited by Vytfla; 02-11-2013 at 12:35 AM.

  • #6
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    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.
    Last edited by LearningCoder; 02-11-2013 at 12:47 AM.

  • #7
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hm nope, that doesn't seem to work either

  • #8
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    It should work, I had it working exactly like the site.

    Can you post all of your updated code?

    Regards,

    LC.

  • #9
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by LearningCoder View Post
    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);
    }

  • #10
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts
    It's not working because you haven't linked the jquery file, or copied my code and placed it in your document.

    Regards,

    LC.

  • #11
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by LearningCoder View Post
    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>

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,631
    Thanks
    0
    Thanked 648 Times in 638 Posts
    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';};
    }
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    This should work.

    Code:
    #Field3:focus {background: #colorhexcode;}

  • #14
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,631
    Thanks
    0
    Thanked 648 Times in 638 Posts
    Quote Originally Posted by tempz View Post
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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