I was wondering if there was a way to maintain the pressed/ focused state one you leave the input bo-CodePudding

I am making a form and the client wants the input box to change once clicked and the client wants that change to stay once it has been filled and they have moved to the next input box. Is there anyway to do this? Preferably with only HTML & CSS rather than incorporating any JS. If incorporating JS is absolutely necessary I would not mind that and we can definitely do that.

I can attach the code if it is necessary. I am just wondering if there is a way to maintain the state once you move to no state.

pic 1 is how the form looks empty. pic 2 is how it looks when the form is filled and how the client wants the input box to look after you have left the input box to the next one. pic 3 is how it looks when you leave the input box to the next one.

here is the code:

<!DOCTYPE html><!--  This site was created in Webflow. http://www.webflow.com  -->
<!--  Last Published: Wed Oct 13 2021 17:42:31 GMT 0000 (Coordinated Universal Time)  -->
<html data-wf-page="61660acbd4da295dda70c6e3" data-wf-site="61660acbd4da29651970c6e2">
<head>
  <meta charset="utf-8">
  <title>CCEC Tool Enrollment</title>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta content="Webflow" name="generator">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/webflow.css" rel="stylesheet" type="text/css">
  <link href="css/ccec-tool-enrollment.webflow.css" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
  <script type="text/javascript">WebFont.load({  google: {    families: ["Michroma:regular","Roboto:100,300,regular,500,700,900"]  }});</script>
  <!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
  <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className =t "js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className =t "touch")}(window,document);</script>
  <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
  <link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body class="body">
  <div class="wf-section">
    <div class="w-container">
      <h1 class="heading">CCEC NEW TOOL ENROLLMENT</h1>
      <div class="w-row">
        <div class="w-col w-col-6">
          <div class="w-form">
            <form id="email-form" name="email-form" data-name="Email Form" method="get"><label for="name" class="field-label">TOOL NAME</label><input type="text" class="textfield w-input" maxlength="256" name="name" data-name="Name" placeholder="" id="name"></form>
            <div class="w-form-done">
              <div>Thank you! Your submission has been received!</div>
            </div>
            <div class="w-form-fail">
              <div>Oops! Something went wrong while submitting the form.</div>
            </div>
          </div>
        </div>
        <div class="w-col w-col-6">
          <div class="w-form">
            <form id="email-form-2" name="email-form-2" data-name="Email Form 2"><label for="name" class="field-label-3">TOOL DESCRIPTION</label><input type="text" class="textfield w-input" maxlength="256" name="name-2" data-name="Name 2" placeholder="" id="name-2"></form>
            <div class="w-form-done">
              <div>Thank you! Your submission has been received!</div>
            </div>
            <div class="w-form-fail">
              <div>Oops! Something went wrong while submitting the form.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=61660acbd4da29651970c6e2" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="js/webflow.js" type="text/javascript"></script>
  <!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>

.body {
  border-top: 1px solid #2b2b2b;
  background-color: #2b2b2b;
  color: #fff;
}

.form-block {
  width: 1100px;
  margin-top: 198px;
  margin-left: 122px;
}

.text-field {
  border: 1px none #000;
  opacity: 1;
}

.text-field-2 {
  border-style: none none solid solid;
  border-width: 1px 1px 2px;
  border-color: #000 #000 #fff;
  background-color: #2b2b2b;
  background-clip: border-box;
  -webkit-text-fill-color: inherit;
}

.heading {
  font-family: Michroma, sans-serif;
  font-size: 30px;
  font-weight: 400;
  text-align: center;
}

.field-label {
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.field-label-2 {
  font-weight: 400;
}

.field-label-3 {
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.textfield {
  border-style: none none solid;
  border-width: 1px;
  border-color: #000 #000 #fff;
  background-color: #2b2b2b;
  font-family: Roboto, sans-serif;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
}

.textfield:active {
  border-style: none;
  background-color: #a6a8ab;
  color: #000;
  font-weight: 500;
  background-clip: border-box;
  -webkit-text-fill-color: inherit;
}

.textfield:focus {
  border-style: none;
  border-color: #000 #000 #fff;
  background-color: #a6a8ab;
  color: #000;
  font-weight: 500;
  -o-object-fit: fill;
  object-fit: fill;
}

.text-field-4 {
  border-style: none none solid;
  border-width: 1px;
  border-color: #000 #000 #fff;
  background-color: #2b2b2b;
}

.texty:focus {
  background-color: #000;
  color: #fff;
}

.contact-form {
  padding-top: 100px;
  padding-bottom: 100px;
}

.contact-form-grid {
  display: -ms-grid;
  display: grid;
  margin-top: 40px;
  grid-auto-columns: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto;
}

@media screen and (max-width: 767px) {
  .contact-form {
    padding: 40px 20px;
  }

}

CodePudding user response：

Use :valid and :focus. With :focus you can change the style of an input, and with :valid if there is valid input the style will stay once you leave.

#myfield:valid{
  background:orange;
}
#myfield:focus{
  background: orange;
}

<input type="text" id="myfield" required>

CodePudding user response：

It depends on how detailed you want the validation of that input field, just "not empty" or something more strict, but you can start with something like:

/* Show red borders when filled, but invalid */
input:not(:placeholder-shown) {
  border-color: hsl(0, 76%, 50%);;
}

Show green borders when valid
input:valid {
  //apply same styles you have on :focus
}

taken from https://zellwk.com/blog/check-empty-input-css/

CodePudding user response：

You should use Javascript

HTML

<input id="inputBox" />

Css

input {
    border: 1px solid #000;
    background: red;
}

input.is-focus {
    border: 1px solid #fafafa;
    background: blue;
}

Javascript

document.getElementById("inputBox").addEventListener('focus', (e) => {
    e.target.classList.add("is-focus");
})

CodePudding user response：

Using JavaScript, you can easily meet your client's needs. You can keep your :focus class the same, but then create a second class that takes in the same style changes. Then, add an event listener to the entire form (or the array of inputs that you want this to apply to) which listens for the user's keyup. If the value of the textbox is nothing, then it will stay the same. Else, the class will be added.

const inputsBox = document.querySelector('#inputs')

function changeClass(e){
    let box = e.target;
    box.value !== '' ? box.classList.add('filledOut') : box.classList.remove('filledOut')
}

inputsBox.addEventListener('keyup', changeClass)

#inputs {
  display: flex;
  flex-direction: column;
  width: 30%;
}

input {
  border: 1px solid black;
  transition: all 0.2s linear;
  padding: 8px;
  margin: 2px;
}

input:focus, .filledOut {
  border: 1px solid #fafafa;
  background: grey;
}

  <div id="inputs">
    <input/>
    <input/>
    <input/>
    <input/>
    <input/>
  </div>