Is there a method to preserve the pressed/focused state when moving from one input box to the next?

Question

Is there a method to preserve the pressed/focused state when moving from one input box to the next?

While creating a form for a client, I encountered a requirement where the input box should change once clicked and retain that change even after it has been filled and the user moves to the next input box. Is there a way to achieve this using only HTML & CSS without any JavaScript? If incorporating JS is necessary, we are open to that as well.

https://i.stack.imgur.com/HG1rf.png

https://i.stack.imgur.com/bbMHg.png

https://i.stack.imgur.com/ogJYs.png

If needed, I can provide the code. What I really want to know is if there's a method to maintain the state of the input boxes when moving to another state.

Pic 1 shows how the form looks empty. Pic 2 demonstrates the desired appearance after filling the form and moving to the next field. Pic 3 illustrates the look when advancing to the subsequent input box.

Here's the provided 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;
  }

}

javascript html css

Answer 1

Answer №1

Utilize the :valid and :focus pseudo-classes to customize the style of an input field. When using :focus, you can modify the appearance of the input field when it is in focus, while :valid will maintain the specified style if the user enters valid input and then moves on from the field.

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

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

Answer 2

Utilize the :valid and :focus pseudo-classes to customize the style of an input field. When using :focus, you can modify the appearance of the input field when it is in focus, while :valid will maintain the specified style if the user enters valid input and then moves on from the field.

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

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

Answer 3

Answer №2

To determine the level of validation for an input field, consider whether you want a basic "not empty" check or more thorough validation. You can implement a starting point using the following CSS code:

/* 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
}

Source:

Answer 4

To determine the level of validation for an input field, consider whether you want a basic "not empty" check or more thorough validation. You can implement a starting point using the following CSS code:

/* 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
}

Source:

Answer 5

Answer №3

With the power of JavaScript, meeting your client's requirements is a breeze. By maintaining the :focus class as it is and introducing a secondary class with similar style modifications, you can efficiently enhance user experience. Simply attach an event listener to the entire form (or group of inputs) to detect keyup actions by the user. If the textbox remains empty, the styling will remain unchanged. However, if there is input detected, the additional class will be applied.

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>

Answer 6

With the power of JavaScript, meeting your client's requirements is a breeze. By maintaining the :focus class as it is and introducing a secondary class with similar style modifications, you can efficiently enhance user experience. Simply attach an event listener to the entire form (or group of inputs) to detect keyup actions by the user. If the textbox remains empty, the styling will remain unchanged. However, if there is input detected, the additional class will be applied.

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>

Answer 7

Answer №4

If you want to enhance user experience, consider implementing 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");
})

Answer 8

If you want to enhance user experience, consider implementing 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");
})

Is there a method to preserve the pressed/focused state when moving from one input box to the next?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The PHP index is not being identified when accessed through the post method

Eliminating the final space in CSS flexbox layout

Responsive design not functioning properly for Bootstrap columns on website

Is it possible to use a figure tag as a fancybox link?

Just finished my first webpage - can't seem to get the footer to stay put!

retrieving multiple values in ajax call and processing them in controller function

Utilize VueJS to pass back iteration values using a custom node extension

Error in Node: JSON parse failure due to invalid token "'<'" and ""<!DOCTYPE ""

Which is the Better React Entry Point: Index.html or index.js? And where exactly can we find the Node.js

The Server-Sent Event feature seems to be malfunctioning as it appears that browsers are unable to detect any events sent through Server-Sent

Implementing a Response to an AJAX POST Request with Servlets

Revealing the Contents of a View Selection in an HTML DIV

Troubleshooting a problem with dynamic options in Materialize select set

Enhance React form rendering efficiency

placing a div inside another div

Utilize external URL in trigger.io's custom UIWebView component

Is there a way to send decimal values from a view to a controller using Vue.js?

Expanding the use of tagged template literals for passing additional arguments

Clearing the ng-model value in a controller following an ng-change event

Achieving Text Wrapping Around Unconventional Shapes Using CSS