css Apply styles to form controls only if they are not empty

Question

css Apply styles to form controls only if they are not empty

Utilizing an angularjs form, I have customized the following example to fit my code:

    .my-5 {
      margin:100px;
    }

    .form-group {
      position: relative;
      margin-bottom: 1.5rem;
    }

    .form-control-placeholder {
      position: absolute;
      top: 0;
      padding: 7px 0 0 13px;
      transition: all 200ms;
      opacity: 0.5;
    }

    .form-control:focus + .form-control-placeholder,
    .form-control:valid + .form-control-placeholder {
      font-size: 75%;
      transform: translate3d(0, -100%, 0);
      opacity: 1;
    }

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container my-5">
      <div class="row">
        <div class="col-md-6 mx-auto">
          <div class="form-group">
            <input type="email" id="email" class="form-control" required>
            <label class="form-control-placeholder" for="email">email</label>
          </div>
        </div>
      </div>
    </div>

The issue arises when an invalid input is provided, causing the placeholder to revert to its initial state and position itself on the invalid input. Therefore, the objective is to maintain the floating placeholder even in the case of invalid email inputs. How can the floating placeholder be retained for invalid email inputs as well?

If I incorporate:

.form-control:invalid + .form-control-placeholder

into the current floating CSS, it will remain floating when no input is provided. The goal is to prevent it from floating when empty.

html css

Answer 1

Answer №1

Right here, I utilized JavaScript to dynamically adjust CSS based on whether a specific input is empty or not. It's a relatively straightforward process.

function checkValidation(){
var inputValue = document.getElementById("email").value;

    if (inputValue.trim() == '') {
      document.getElementById('emailText').style.fontSize = ''; //reverting to default
      document.getElementById('emailText').style.opacity = '';
      document.getElementById('emailText').style.transform = '';
      //Empty therefore resetting the styles
    } else {
      document.getElementById('emailText').style.fontSize = '75%';
      document.getElementById('emailText').style.opacity = '1';
      document.getElementById('emailText').style.transform = 'translate3d(0, -100%, 0)';
      //Not empty, so adjusting the css properties.
    }
}

.my-5 {
      margin:100px;
    }

    .form-group {
      position: relative;
      margin-bottom: 1.5rem;
    }

    .form-control-placeholder {
      position: absolute;
      top: 0;
      padding: 7px 0 0 13px;
      transition: all 200ms;
      opacity: 0.5;
    }

    .form-control:focus + .form-control-placeholder,
    .form-control:valid + .form-control-placeholder {
      font-size: 75%;
      transform: translate3d(0, -100%, 0);
      opacity: 1;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container my-5">
      <div class="row">
        <div class="col-md-6 mx-auto">
          <div class="form-group">
            <input onchange='checkValidation()' type="email" id="email" class="form-control" required>
            <label class="form-control-placeholder" id='emailText' for="email">email</label>
          </div>
        </div>
      </div>
    </div>

    A brief overview of the process:
    JavaScript{
      Verify user input{
        Check if it's empty{
          yes: revert to default styling
          no: apply specified transformations
        }
      }
    }

Here's a breakdown of what might have been done incorrectly:

.form-control:valid + .form-control-placeholder {

If your input field has the email type, providing text or numbers won't trigger the intended CSS changes since you're specifically looking for :valid state.

Furthermore, Detect if an input has text in it using CSS -- on a page I am visiting and do not control? addresses some confusion. "CSS has no (pseudo) selectors for value(s)". Given this limitation, leveraging JavaScript seems like the most viable solution for such scenarios.

Answer 2

Right here, I utilized JavaScript to dynamically adjust CSS based on whether a specific input is empty or not. It's a relatively straightforward process.

function checkValidation(){
var inputValue = document.getElementById("email").value;

    if (inputValue.trim() == '') {
      document.getElementById('emailText').style.fontSize = ''; //reverting to default
      document.getElementById('emailText').style.opacity = '';
      document.getElementById('emailText').style.transform = '';
      //Empty therefore resetting the styles
    } else {
      document.getElementById('emailText').style.fontSize = '75%';
      document.getElementById('emailText').style.opacity = '1';
      document.getElementById('emailText').style.transform = 'translate3d(0, -100%, 0)';
      //Not empty, so adjusting the css properties.
    }
}

.my-5 {
      margin:100px;
    }

    .form-group {
      position: relative;
      margin-bottom: 1.5rem;
    }

    .form-control-placeholder {
      position: absolute;
      top: 0;
      padding: 7px 0 0 13px;
      transition: all 200ms;
      opacity: 0.5;
    }

    .form-control:focus + .form-control-placeholder,
    .form-control:valid + .form-control-placeholder {
      font-size: 75%;
      transform: translate3d(0, -100%, 0);
      opacity: 1;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container my-5">
      <div class="row">
        <div class="col-md-6 mx-auto">
          <div class="form-group">
            <input onchange='checkValidation()' type="email" id="email" class="form-control" required>
            <label class="form-control-placeholder" id='emailText' for="email">email</label>
          </div>
        </div>
      </div>
    </div>

    A brief overview of the process:
    JavaScript{
      Verify user input{
        Check if it's empty{
          yes: revert to default styling
          no: apply specified transformations
        }
      }
    }

Here's a breakdown of what might have been done incorrectly:

.form-control:valid + .form-control-placeholder {

If your input field has the email type, providing text or numbers won't trigger the intended CSS changes since you're specifically looking for :valid state.

Furthermore, Detect if an input has text in it using CSS -- on a page I am visiting and do not control? addresses some confusion. "CSS has no (pseudo) selectors for value(s)". Given this limitation, leveraging JavaScript seems like the most viable solution for such scenarios.

Answer 3

Answer №2

Are you looking for this specific format?

.group { 
  position:relative; 
  margin: 40px;
}

.group input {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}

.group input:focus { outline:none;}

.group input ~ label {
  color:#999; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.group input:focus ~ label, .group input:valid ~ label {
  top:-20px;
  font-size:14px;
  color: #009688;
}

<div class="group">      
  <input type="text" required>
  <label>Username</label>
</div>

Answer 4

Are you looking for this specific format?

.group { 
  position:relative; 
  margin: 40px;
}

.group input {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}

.group input:focus { outline:none;}

.group input ~ label {
  color:#999; 
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.group input:focus ~ label, .group input:valid ~ label {
  top:-20px;
  font-size:14px;
  color: #009688;
}

<div class="group">      
  <input type="text" required>
  <label>Username</label>
</div>

css Apply styles to form controls only if they are not empty

Answer №1

Answer №2

Similar questions

How to properly store response text in JavaScript variable?

Can you explain the differences between offsetHeight, clientHeight, and scrollHeight for me?

What is the proper way to specify the type for a <video> element reference in React when utilizing Typescript?

Is there a way to verify if all the div elements are set to display as none?

Tips for allowing divs to be dragged and resized within table cells and rows

Arranging text within a td cell

Clicking on two links simultaneously to avoid them being blocked as pop-ups

What steps should I take to resolve the problem while in Quirks mode?

Some pages are receiving images from the CDN, while others are not

The height of the div unexpectedly adjusts after content is displayed on hover

InnerHTML failing to append HTML content

Retrieving localStorage data from another webpage

Would adjusting the font sizes of headings be crossing into grey or black hat SEO territory?

What is the best method for retrieving data using Selenium when the class name may vary slightly?

The process of manipulating the content of an HTML textarea using Selenium with Python

Declaration of Character Encoding in CSS3

Having trouble dynamically adding HTML elements in JQuery

Using flexbox to adjust the height of a block in the layout

CSS shimmer effect does not smoothly transition between borders

HTML5 Local Storage allows web developers to store data locally within