css select form control if not empty

Question

I am using angularjs form, and I have the following example adapted to 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 problem is that when an invalid input is given, the placeholder returns to the initial state and gets positioned on the invalid input. So the idea is to apply the floating placeholder in case of invalid inputs as well. How can I maintain the floating placeholder in case of invalid email input as well?

if I add : .form-control:invalid + .form-control-placeholder to the current floating css, it will always be floating when no input is given. So the idea is to not float when it is empty.

As you're using angularjs, you can use ng-class directive to add some class (eg. 'not-empty') when input is not empty (you can store this information in some scope variable). I can't give you any complete solution as I didn't used angularjs for a long time but I think this is the easiest approach to this problem. — Wilhelm Olejnik
– Wilhelm Olejnik, Commented Jul 7, 2018 at 20:30

Lorddirt · Accepted Answer · 2018-07-08 01:10:25Z

Here. I just used javascript to set CSS by checking if it is empty or not. Pretty simple.

function checkValid(){
var input = document.getElementById("email").value;

    if (input.trim() == '') {
      document.getElementById('emailText').style.fontSize = ''; //setting to default value
      document.getElementById('emailText').style.opacity = '';
      document.getElementById('emailText').style.transform = '';
      //Empty so change it back
    } 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 change the css.
    }
}

.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='checkValid()' type="email" id="email" class="form-control" required>
            <label class="form-control-placeholder" id='emailText' for="email">email</label>
          </div>
        </div>
      </div>
    </div>

    Quick explanation of what I did:
    Javascript{
      Check if the input was changed{
        Check if it is empty{
          true: set css to default
          false: set css transformation
        }
      }
    }

And a quick explanation of what you did wrong:

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

If your input type is email, then putting in a string or number will not trigger the css, since you made it check for :valid.

Also, Detect if an input has text in it using CSS -- on a page I am visiting and do not control? clarifies some things too. "CSS has no (pseudo) selectors for value(s)". Javascript to me is the easiest option then for this problem.

Yes, as others said, this is NOT the easiest way to fix it, but the most comfortable for most people, plain javascript.

MajiD · Accepted Answer · 2018-07-07 20:01:50Z

0

is this what you want ?

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

answered Jul 7, 2018 at 20:01

MajiD

2,6151 gold badge26 silver badges35 bronze badges

2 Comments

Bonnard Over a year ago

you are missing a point here. change the input type to email and you will see the unwanted behaviour.

MajiD Over a year ago

oh yeah you are right. because in the email input text we enter is not valid ! it needs some js in that case

Collectives™ on Stack Overflow

css select form control if not empty

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related