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, Jul 07 '18 at 20:30

Lorddirt · Accepted Answer · 2018-07-08T01:10:25.810

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. — Lorddirt, Jul 08 '18 at 01:01

score 0 · Answer 2 · answered Jul 07 '18 at 20:01

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>

you are missing a point here. change the input type to email and you will see the unwanted behaviour. — Bonnard, Jul 07 '18 at 20:07
oh yeah you are right. because in the email input text we enter is not valid ! it needs some js in that case — MajiD, Jul 07 '18 at 20:11

css select form control if not empty

2 Answers2