What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by BJ2 on April 06, 2016 at 09: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 


    css code text box color changing text entered
  • Profile Image
    JotForm Support

    Answered by mert on April 06, 2016 at 09: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:

     

    For further assistance, please do let us know.

    Regards.

  • Profile Image

    Answered by BJ2 on April 06, 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!!!

  • Profile Image
    JotForm Support

    Answered by mert on April 06, 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.

  • Profile Image

    Answered by BJ2 on April 06, 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~

  • Profile Image
    JotForm Support

    Answered by liyam on April 06, 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.

  • Profile Image

    Answered by BJ2 on April 07, 2016 at 09: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!

  • Profile Image
    JotForm Support

    Answered by mert on April 07, 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.