Selase Selase - 2 months ago 15
CSS Question

How to fix input placeholder overlapping with entered text?

I have created a simple form and wanted to style it with Google's Material Design. However, the placeholder text gets in the way of the entered text as shown in the screenshot below. I would appreciate your help figuring out the issue and how to fix it.

screen shot of form design with issue

Below is the code:



@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background: #c0392b;
font-family: Raleway;
color: white;
letter-spacing: 1px;
}
#formreg {
width: 250px;
background: #fff;
border: 1px solid #ebebeb;
box-shadow: 0 27px 55px 0 rgba(0, 0, 0, .3), 0 17px 17px 0 rgba(0, 0, 0, .15);
}
#formbody.form-body {
padding: 1em 2em 1em 2em;
}
#formtitle.form-title {
width: 100%;
margin-bottom: 2em;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
font-size: 20px;
font-weight: bold;
background: #eee;
border-radius: 0;
}
#formbody #group1 input,
#formbody #group2 input,
#formbody #group3 input {
font-size: 15px;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
background: #fff;
color: #636363;
width: 95%;
border: none;
border-radius: 0;
border-bottom: 1px solid #999;
}
#formbody #group1 input:focus,
#formbody #group2 input:focus,
#formbody #group3 input:focus {
outline: none;
}
/* Label */

#formbody #group1 label,
#formbody #group2 label,
#formbody #group3 label {
color: #999;
font-size: 15px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all .2s ease;
}
/* active */

#formbody #group1 input:focus ~ label,
#formbody #group1 input.used ~ label,
#formbody #group2 input:focus ~ label,
#formbody #group2 input.used ~ label,
#formbody #group3 input:focus ~ label,
#formbody #group3 input.used ~ label {
top: -20px;
transform: scale(.75);
left: -2px;
/* font-size: 14px; */
color: #4a89dc;
}
/* Underline */

.bar {
position: relative;
display: block;
width: 100%;
}
.bar::before,
.bar::after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4a89dc;
transition: all .2s ease;
}
.bar::before {
left: 50%;
}
.bar::after {
right: 50%;
}
/* active */

#formbody #group1 input:focus ~ .bar:before,
#formbody #group1 input:focus ~ .bar:after,
#formbody #group2 input:focus ~ .bar:before,
#formbody #group2 input:focus ~ .bar:after,
#formbody #group3 input:focus ~ .bar:before,
#formbody #group3 input:focus ~ .bar:after {
width: 50%;
}
/* Highlight */

.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: .5;
}
/* active */

#formbody #group1 input:focus ~ .highlight,
#formbody #group2 input:focus ~ .highlight,
#formbody #group3 input:focus ~ .highlight {
animation: inputHighlighter 0.3s ease;
}
@keyframes inputHighlighter {
from {
background: #4a89dc;
}
to {
width: 0;
background: transparent;
}
}
/* Button */

.button {
position: relative;
display: inline-block;
padding: 12px 24px;
margin: .3em 0 0em 0;
width: 100%;
vertical-align: middle;
color: #fff;
font-size: 16px;
line-height: 20px;
-webkit-font-smoothing: antialiased;
text-align: center;
letter-spacing: 1px;
background: transparent;
border: 0;
border-bottom: 2px solid #3160B6;
cursor: pointer;
transition: all .15s ease;
}
.button:focus {
outline: 0;
}
/* Button modifiers */

.buttonBlue {
background: #4a89dc;
text-shadow: 1px 1px 0 rgba(39, 110, 204, .5);
}
.buttonBlue:hover {
background: #357bd8;
}
/* Ripples container */

.ripples {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
/* Ripples circle */

.ripplesCircle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .25);
}
.ripples.is-active .ripplesCircle {
animation: ripples .4s ease-in;
}
/* Ripples animation */

@keyframes ripples {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
100% {
width: 200%;
padding-bottom: 200%;
opacity: 0;
}
}
.orange-text {
color: #fd7b1b;
}
.blue-text {
color: #1e73be;
}
.group {
position: relative;
margin-bottom: 45px;
}
.rule {
height: 2px;
background: #e8ebed;
margin: 0px 35px;
}

<div id="regform">
<form id="formreg">
<div id="formtitle" class="form-title"><span class="orange-text">REGISTER &nbsp;</span> <span class="blue-text">FOR ACCOUNT INFO </span>
</div>
<div id="formbody" class="form-body">
<div id="group1" class="group">
<input type="text"><span class="highlight"></span><span class="bar"></span>
<label>Name</label>
</div>
<div id="group2" class="group">
<input type="email"><span class="highlight"></span><span class="bar"></span>
<label>Email</label>
</div>
<div id="group3" class="group">
<input type="email"><span class="highlight"></span><span class="bar"></span>
<label>Tel. Number</label>
</div>
</div>
<div id="formbutton">
<button type="button" class="button buttonBlue">Submit
<div class="ripples buttonRipples"><span class="ripplesCircle"></span>
</div>
</button>
</div>
</form>
</div>




Answer

I have already answered a similar question here.

What you need here is an :empty selector and :valid selector to make the transition of placeholder work for all situations- but sadly :empty will not work for input.

So you have to use some JS here:

$("input").each(function() {
  var $this = $(this);
  // add empty class on initial run
  if ($(this).val().trim() == "") {
      $(this).addClass("input-empty");
    } else {
      $(this).removeClass("input-empty");
    }
  // add empty class on input change
  $this.on("change", function() {
    if ($(this).val().trim() == "") {
      $(this).addClass("input-empty");
    } else {
      $(this).removeClass("input-empty");
    }
  });
});

The input-empty will be added if the input box is empty. Then you need this CSS to go with it:

/* not empty but valid */

#formbody #group1 input:not(.input-empty):valid ~ label,
#formbody #group2 input:not(.input-empty):valid ~ label,
#formbody #group3 input:not(.input-empty):valid ~ label {
  top: -20px;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  left: -2px;
  /* font-size: 14px; */
  color: #4a89dc;
}

/* not empty but invalid */

#formbody #group1 input:not(.input-empty):invalid ~ label,
#formbody #group2 input:not(.input-empty):invalid ~ label,
#formbody #group3 input:not(.input-empty):invalid ~ label {
  top: -20px;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  left: -2px;
  /* font-size: 14px; */
  color: red;
}

Hope you can take this forward from here. Let me know your feedback on this. Cheers!

$("input").each(function() {
  var $this = $(this);
  if ($(this).val().trim() == "") {
      $(this).addClass("input-empty");
    } else {
      $(this).removeClass("input-empty");
    }
  $this.on("change", function() {
    if ($(this).val().trim() == "") {
      $(this).addClass("input-empty");
    } else {
      $(this).removeClass("input-empty");
    }
  });
});
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
 body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: #c0392b;
  font-family: Raleway;
  color: white;
  letter-spacing: 1px;
}
#formreg {
  width: 250px;
  background: #fff;
  border: 1px solid #ebebeb;
  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
}
#formbody.form-body {
  padding: 1em 2em 1em 2em;
}
#formtitle.form-title {
  width: 100%;
  margin-bottom: 2em;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 50px;
  font-size: 20px;
  font-weight: bold;
  background: #eee;
  border-radius: 0;
}
#formbody #group1 input,
#formbody #group2 input,
#formbody #group3 input {
  font-size: 15px;
  padding: 10px 10px 10px 5px;
  -webkit-appearance: none;
  display: block;
  background: #fff;
  color: #636363;
  width: 95%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #999;
}
#formbody #group1 input:focus,
#formbody #group2 input:focus,
#formbody #group3 input:focus {
  outline: none;
}
/* Label */

#formbody #group1 label,
#formbody #group2 label,
#formbody #group3 label {
  color: #999;
  font-size: 15px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
/* active */

#formbody #group1 input:focus ~ label,
#formbody #group1 input.used ~ label,
#formbody #group2 input:focus ~ label,
#formbody #group2 input.used ~ label,
#formbody #group3 input:focus ~ label,
#formbody #group3 input.used ~ label {
  top: -20px;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  left: -2px;
  /* font-size: 14px; */
  color: #4a89dc;
}

/* not empty but valid */

#formbody #group1 input:not(.input-empty):valid ~ label,
#formbody #group2 input:not(.input-empty):valid ~ label,
#formbody #group3 input:not(.input-empty):valid ~ label {
  top: -20px;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  left: -2px;
  /* font-size: 14px; */
  color: #4a89dc;
}

/* not empty but invalid */

#formbody #group1 input:not(.input-empty):invalid ~ label,
#formbody #group2 input:not(.input-empty):invalid ~ label,
#formbody #group3 input:not(.input-empty):invalid ~ label {
  top: -20px;
  -webkit-transform: scale(0.75);
  transform: scale(0.75);
  left: -2px;
  /* font-size: 14px; */
  color: red;
}

/* Underline */

.bar {
  position: relative;
  display: block;
  width: 100%;
}
.bar:before,
.bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #4a89dc;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.bar:before {
  left: 50%;
}
.bar:after {
  right: 50%;
}
/* active */

#formbody #group1 input:focus ~ .bar:before,
#formbody #group1 input:focus ~ .bar:after,
#formbody #group2 input:focus ~ .bar:before,
#formbody #group2 input:focus ~ .bar:after,
#formbody #group3 input:focus ~ .bar:before,
#formbody #group3 input:focus ~ .bar:after {
  width: 50%;
}
/* Highlight */

.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}
/* active */

#formbody #group1 input:focus ~ .highlight,
#formbody #group2 input:focus ~ .highlight,
#formbody #group3 input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}
/* Animations */

@-webkit-keyframes inputHighlighter {
  from {
    background: #4a89dc;
  }
  to {
    width: 0;
    background: transparent;
  }
}
@keyframes inputHighlighter {
  from {
    background: #4a89dc;
  }
  to {
    width: 0;
    background: transparent;
  }
}
/* Button */

.button {
  position: relative;
  display: inline-block;
  padding: 12px 24px;
  margin: .3em 0 0em 0;
  width: 100%;
  vertical-align: middle;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  letter-spacing: 1px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid #3160B6;
  cursor: pointer;
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease;
}
.button:focus {
  outline: 0;
}
/* Button modifiers */

.buttonBlue {
  background: #4a89dc;
  text-shadow: 1px 1px 0 rgba(39, 110, 204, 0.5);
}
.buttonBlue:hover {
  background: #357bd8;
}
/* Ripples container */

.ripples {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: transparent;
}
/* Ripples circle */

.ripplesCircle {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.ripples.is-active .ripplesCircle {
  -webkit-animation: ripples .4s ease-in;
  animation: ripples .4s ease-in;
}
/* Ripples animation */

@-webkit-keyframes ripples {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0;
  }
}
@keyframes ripples {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    width: 200%;
    padding-bottom: 200%;
    opacity: 0;
  }
}
.orange-text {
  color: #fd7b1b;
}
.blue-text {
  color: #1e73be;
}
.group {
  position: relative;
  margin-bottom: 45px;
}
.rule {
  height: 2px;
  background: #e8ebed;
  margin: 0px 35px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="regform">
  <form id="formreg">
    <div id="formtitle" class="form-title"><span class="orange-text">REGISTER &nbsp;</span>  <span class="blue-text">FOR ACCOUNT INFO </span>
    </div>
    <div id="formbody" class="form-body">
      <div id="group1" class="group">
        <input type="text"><span class="highlight"></span><span class="bar"></span>
        <label>Name</label>
      </div>
      <div id="group2" class="group">
        <input type="email"><span class="highlight"></span><span class="bar"></span>
        <label>Email</label>
      </div>
      <div id="group3" class="group">
        <input type="email"><span class="highlight"></span><span class="bar"></span>
        <label>Tel. Number</label>
      </div>
    </div>
    <div id="formbutton">
      <button type="button" class="button buttonBlue">Submit
        <div class="ripples buttonRipples"><span class="ripplesCircle"></span>
        </div>
      </button>
    </div>
  </form>
</div>

Comments