How to change the background color of the input field when it is selected?

  • BJ2
    Asked on April 6, 2016 at 9:10 AM

    Hi again JotForm Support Team!

    I am always relying to your great support ever.

    Please tell me how or what CSS code can I use for changing text box color when something is entered.

    For example, "o" or just "adding a blank space" is written on the text box, then color white will change to yellow.

    I will wait for your kind reply.
    Thank you so much in advance!

     

    This is the edit link, and I put check mark on the text box.
    So I hope that text box COLOR will change if a user add any on it.

    https://www.jotform.com/edit/335677555241248506 


  • mert JotForm UI Developer
    Replied on April 6, 2016 at 9:55 AM

    Hi there,

    By using the following CSS rule, the form's inputs will have the desired customization.

     

    input:focus {

        background-color: yellow;

    }

     

    Below, you can see the results of it:

    How to change the background color of the input field when it is selected? Image 1 Screenshot 20

     

    For further assistance, please do let us know.

    Regards.

  • BJ2
    Replied on April 6, 2016 at 10:02 AM

    Hi Sir Mert!
    I really appreciate your quick help! (^__^)/

    However, I wish that the edited text box will retain the new yellow color.
    But will return to white color if the character is deleted from the text box...

    I hope it's possible......but if not, I'll think another way then.

    I will wait for your great reply.
    Thank you as always!!!

  • mert JotForm UI Developer
    Replied on April 6, 2016 at 10:51 AM

    Hi again,

    Firstly, you are most welcome. Now, I understand what you want; but we can't achieve this goal with CSS, there is no selector which is doing the thing you want in the CSS language. However, we can achieve this issue with some Javascript. Before we start, please download the source code of your form, because we need to add some <script> in its HTML.

     

    On the HTML file of your form please add the following code between <head>...</head> tags:

     

    <script>

    $(function(){

            $('input:required,textarea:required').on('blur', function(){

               if($(this).val()!==''){

                 $(this).addClass('yellow-background');

               } else {

                 $(this).removeClass('yellow-background');

               }

            });

      });

    </script> 

     

    Then, add the following CSS codes to the "form.css" file which is in the "style" folder:

     

    .yellow-background {

      background-color:yellow;  

    }

     

    input:required:focus {

      border: 1px solid red;

      outline: none;

    }

     

    textarea:required:focus {

      border: 1px solid red;

      outline: none;

    }

     

    This changes will make the desired changes on your form. Please, do let us know the results after trying it.

     

    Regards.

  • BJ2
    Replied on April 6, 2016 at 11:10 AM

    WOW! What a swift help~

    However, I am very sorry but I don't know where is the <head> there,I couldn't find after I copied or even download the source code..

    Could you please kindly clone my form here https://form.jotform.co/60941088545865
    I will just clone your updated form.

    I am really sorry, but I have very little knowledge of html...
    Please help Sir...
    Thank you so much in advance~

  • liyam
    Replied on April 6, 2016 at 12:38 PM

    Hello,

    As mentioned by mert, you will have to download the HTML source code of your form.  This user guide will help you understand the steps on how to achieve to get the full source. Also, you will have to upload your form with the modified source on your website and not depend on JotForm's host.

    Here's a better sample of the result after following mert's instructions: 

        http://liyam.comuf.com/JotForm/sampleBJ2.html

    What I did there is save an HTML file from the full source and inserting mert's instructions.

    If you need further clarification, please do let us know.

  • BJ2
    Replied on April 7, 2016 at 9:26 AM

    Hi Sir Liyam and Sir Mert!
    I am really grateful to your kind assistance.
    I just realized that it would take time and be tasky, so I've decide to think another strategy for this.

    Once again, thank you for your great assistance as always!

  • mert JotForm UI Developer
    Replied on April 7, 2016 at 10:29 AM

    You are most welcome. As I explained before, there is no easy solution for your scenario, because CSS isn't enough to solve the problem. However, if you need any extra help, please do let us know.

     

    Thank you.