How can I dynamically change input background color?

  • Profile Image
    rtikle
    Asked on September 16, 2017 at 11:21 PM

    I am trying to achieve the same effect on this website, the login input should be white before you click on it, purple when selected, and after you click away from the box when text is input, it turns another green. 

    I am working on a project that requires the lack of a webserver and I am only familiar with HTML and CSS.

    If my goal is not entirely possible, I would like to be able to achieve it to some extent at least.

    Thank you sincerely for your time.

  • Profile Image
    EltonCris
    Answered on September 17, 2017 at 02:01 AM

    I think we can only achieve the default and focus state. As far as I can see, JotForm does not add special attributes for the filled fields.

    Anyway, to achieve the focus state, use the following CSS codes. This basically makes the input background color to white and change it to purple on focus.

    .form-textbox, .form-textarea, .form-dropdown {

    background:#fff;

    transition:0.2s ease;

    }

    .form-line-active input:focus, .form-line-active textarea:focus, .form-line-active select:focus {

    background:#d0b0ff;

    }

    Simply inject this CSS codes to your form http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

     

  • Profile Image
    rtikle
    Answered on September 17, 2017 at 09:30 AM

    to clarify, can this be done without jotform? i still plan to use it, but my goal is to be able to carry this html file around on a flashdrive.

  • Profile Image
    BDAVID
    Answered on September 17, 2017 at 12:26 PM

    What do you mean by "can this be done without jotform?"? If you mean that you don't want to inject the custom CSS code through the JotForm builder, you can simply use the full source code of your form: https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form, and inject the code in your webpage by using the style tags.

  • Profile Image
    rtikle
    Answered on September 18, 2017 at 08:40 AM

    Alright so I have inserted this into my page:

    input:focus {

     

        background-color: #bf99bd;

     

    }

    and it works great, but now i need the input background to change color to green after text is entered OR change color to green when the input loses focus after getting in...

     

    Thanks so Much for your help, the support here is great!

  • Profile Image
    Kevin_G
    Answered on September 18, 2017 at 11:01 AM

    It's possible to change the color as you want, you would only need to add the following CSS code to the form: 

    input {

        background-color: green;

    }

    But the input field will have always the green color, no matter if it's been filled or not. 

    If you want to change the background color only when the field has been filled, then you will need to use some other code, here is an example using jQuery to change the background color when the input has a value: 

    https://shots.jotform.com/kevin/Content/Samples/ChangeBackColorjQuery/ 

    This is the code I used for that: https://shots.jotform.com/kevin/Content/Samples/ChangeBackColorjQuery/raw.txt 

    But this would require you to get the source code  of your form, in case that you want to implement it to your JotForm form. Or you may simply add the code to your webpage. 

    I hope this helps. 

  • Profile Image
    Kevin_G
    Answered on September 18, 2017 at 04:10 PM

    Will not be possible to implement such code as the form builder does not accept JavaScript codes, if you want to have this implemented on your JotForm form, then you will need to get the source code as advised above by my colleague Bdavid.

    Now, here is a code with the change applied: https://shots.jotform.com/kevin/Content/Samples/1249755/ 

    You can see how it works here: https://shots.jotform.com/kevin/Content/Samples/1249755/ 

    Also, please note that it's not possible to ask for login information through JotForm so please avoid to ask for such or any other information that may go against our terms.

    I hope this helps.  

  • Profile Image
    rtikle
    Answered on September 18, 2017 at 04:28 PM

    It does not actually log you in, this is for my a representation page, to emulate a website without logging you in, it puts the login information in the url and does not send or do anything else with it.

    As I specified earlier I have already used jotform and am not using it for my html file at the moment.

    This is all in an independent html file, not planning on using jotform anymore, i used it in the beginning of this project.

  • Profile Image
    rtikle
    Answered on September 21, 2017 at 10:16 AM

    i do not have a webserver, i am running this locally; please respond

  • Profile Image
    Kevin_G
    Answered on September 21, 2017 at 11:33 AM

    This is the modified code of the one you provided: https://shots.jotform.com/kevin/Content/Samples/1249755/raw.txt 

    Copy and paste it on the documents you're working on. 

    Please if you need help with a JotForm form, let us know.