How to create a form similar to Google's sign-in form?

问题

Currently I am working on a site in which I am making a contact form inspired by Google's material design sign-in form.

The effect that I want is like when I click on the input field, the value (which is a label) should change it's position, size and color. It has been successfully implemented too but the effect is only taking place in the input fields with "required" attribute.

The same effect cannot be achieved in the default input fields.

.civildaily-form {
  display: block;
}

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

.civildaily-form .form-group input.form-control,
.civildaily-form .form-group textarea.form-control {
  font-size: 14px;
  border: none;
  border-bottom: 1px solid #ced4da;
  outline: none;
  background: transparent;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  padding: 10px 0;
  line-height: normal;
}

.civildaily-form .form-group input[type='text'].form-control:focus,
.civildaily-form .form-group input[type='email'].form-control:focus,
.civildaily-form .form-group textarea.form-control:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}

.civildaily-form label {
  font-family: "Raleway-Bold", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #282828;
  position: absolute;
  top: 0;
  padding: 10px 0;
  pointer-events: none;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.civildaily-form .form-group input[type='text'].form-control:focus~label,
.civildaily-form .form-group input[type='email'].form-control:focus~label,
.civildaily-form .form-group input[type='text'].form-control:valid~label,
.civildaily-form .form-group input[type='email'].form-control:valid~label,
.civildaily-form .form-group textarea.form-control:focus~label,
.civildaily-form .form-group textarea.form-control:valid~label {
  top: -20px;
  font-size: 12px;
  color: #004880;
}

<form class="civildaily-form">
  <div class="form-group">
    <input type="text" class="form-control" required>
    <label for="Name">Name</label>
  </div>

  <div class="form-group">
    <input type="text" class="form-control" required>
    <label for="Email">Email</label>
  </div>

  <div class="form-group">
    <input type="text" class="form-control">
    <label for="Phone">Phone</label>
  </div>

  <div class="form-group">
    <input type="text" class="form-control">
    <label for="Company Name">Company Name</label>
  </div>
</form>

Here is the

回答1:

Looks like you just need to add left: 0; to your css for .civildaily-form label and remove your conflicting css selectors for :valid pseudo class on your input elements.

You can't reliably detect whether the input is empty with css only across all major browsers (the :valid pseudo-class you are using will only work for required fields, you could also use a hack with the :placeholder-shown pseudo-class but browser support is limited). JavaScript is the more reliable way to detect whether or not the input is empty to apply the appropriate label positioning styles (added a .filled class to the css to work with the javascript, but you could name it anything you want).

Working snippet below:

const fields = document.querySelectorAll('.form-control');

for (let field of fields) {
  field.addEventListener('blur', (event) => {
    let sel = event.target;
    if (sel.value) {
      sel.classList.add('filled');
    } else {
      sel.classList.remove('filled');
    }  
  });
}

.civildaily-form {
  display: block;
}

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

.civildaily-form .form-group input.form-control,
.civildaily-form .form-group textarea.form-control {
  font-size: 14px;
  border: none;
  border-bottom: 1px solid #ced4da;
  outline: none;
  background: transparent;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  padding: 10px 0;
  line-height: normal;
}

.civildaily-form .form-group input[type='text'].form-control:focus,
.civildaily-form .form-group input[type='email'].form-control:focus,
.civildaily-form .form-group textarea.form-control:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}

.civildaily-form label {
  font-family: "Raleway-Bold", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #282828;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  pointer-events: none;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.civildaily-form .form-group input[type='text'].form-control:focus~label,
.civildaily-form .form-group input[type='email'].form-control:focus~label,
.civildaily-form .form-group textarea.form-control:focus~label,
.civildaily-form .form-group input[type='text'].filled~label,
.civildaily-form .form-group input[type='email'].filled~label,
.civildaily-form .form-group textarea.filled:focus~label{
  top: -20px;
  font-size: 12px;
  color: #004880;
}

<form class="civildaily-form">

  <div class="form-group">
    <input class="form-control" id="name" type="text" placeholder="" required>
    <label for="name">Name</label>
  </div>

  <div class="form-group">
    <input class="form-control" id="email" type="email" required>
    <label for="email">Email</label>
  </div>

  <div class="form-group">
    <input class="form-control" id="phone" type="text">
    <label for="phone">Phone</label>
  </div>

  <div class="form-group">
    <input class="form-control" id="company" type="text">
    <label for="company">Company Name</label>
  </div>
  
</form>

来源：https://stackoverflow.com/questions/51689498/how-to-create-a-form-similar-to-googles-sign-in-form