Text overlapping when input is selected

Question

Text overlapping when input is selected

Whenever I input text, it ends up overlapping with the placeholder text once the input is in place.

https://i.sstatic.net/zoYUS.png

This is the HTML code for my Form:

<form action="./includes/login.inc.php" method="post">
    <div class="group">
        <input type="text" name="emailuid"/><span class="highlight"></span><span class="bar"></span>
        <label>Email</label>
    </div>
    <div class="group">
        <input type="password" name="pwduid"/><span class="highlight"></span><span class="bar"></span>
        <label>Password</label>
    </div>
    <div class="btn-box">
        <button class="btn btn-submit" type="submit" name="login-submit">Sign in</button>
    </div>
</form>

Here is the stylesheet specific to this form:

form {
  width: 320px;
  margin: 45px auto;

}
form h1 {
  font-size: 3em;
  font-weight: 300;
  text-align: center;
  color: #2196F3;
}
form h5 {
  text-align: center;
  text-transform: uppercase;
  color: #c6c6c6;
}
form hr.sep {
  background: #2196F3;
  box-shadow: none;
  border: none;
  height: 2px;
  width: 25%;
  margin: 0px auto 45px auto;
}
...

I am aiming for the bottom "Password" field look when you deselect from the box. The text should move back down to the bottom and overlap the input as you are deselecting.

Your assistance is greatly appreciated.

html css

Answer 1

Answer №1

To implement this functionality using jQuery, utilize the .focus() and .blur() functions. Begin by establishing a class with the style for your label when it is focused. Upon input focus, check if it contains a value. If so, retain the focused class; otherwise, remove it. Refer to the code snippet below:

css

label.focused {
    top: -14px;
  font-size: 12px;
  color: #FF3B3F;
}

jQuery

$('input').focus(function() {
  $(this).siblings('label').addClass('focused');
}).blur(function () {
  if($(this).val().length == 0) {
    $(this).siblings('label').removeClass('focused');
  }
});

Full code

$('input').focus(function() {
  $(this).siblings('label').addClass('focused');
}).blur(function () {
  if($(this).val().length == 0) {
    $(this).siblings('label').removeClass('focused');
  }
});

form {
  width: 320px;
  margin: 45px auto;

}
form h1 {
  font-size: 3em;
  font-weight: 300;
  text-align: center;
  color: #2196F3;
}
form h5 {
  text-align: center;
  text-transform: uppercase;
  color: #c6c6c6;
}
form hr.sep {
  background: #2196F3;
  box-shadow: none;
  border: none;
  height: 2px;
  width: 25%;
  margin: 0px auto 45px auto;
}
form .emoji {
  font-size: 1.2em;
}

.group {
  position: relative;
  margin: 45px 0;
}

textarea {
  resize: none;
}

input,
textarea {
  background: none;
  color: #4F4F4F;
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 320px;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #4F4F4F;
}
input:focus,
textarea:focus {
  outline: none;
}
/*input:focus ~ label,
textarea:focus ~ label {
  top: -14px;
  font-size: 12px;
  color: #FF3B3F;
}*/

label.focused {
    top: -14px;
  font-size: 12px;
  color: #FF3B3F;
}

input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
  width: 335px;
}

input[type="password"] {
  letter-spacing: 0.3em;
}

label {
  color: #4F4F4F;
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
}

.bar {
  position: relative;
  display: block;
  width: 320px;
}
.bar:before {
  content: '';
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: #FF3B3F;
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
  left: 0%;
}

.btn {
  background: #fff;
  color: #959595;
  border: none;
  padding: 10px 20px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn:hover {
  color: #752021;
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
}
.btn.btn-link {
  background: #FF3B3F;
  color: #d3eafd;
}
.btn.btn-link:hover {
  background: #0d8aee;
  color: #deeffd;
}
.btn.btn-submit {
  background: #FF3B3F;
  color: white;
}
.btn.btn-submit:hover {
  background: #752021;
  color: white;
}
.btn.btn-cancel {
  background: #eee;
}
.btn.btn-cancel:hover {
  background: #e1e1e1;
  color: #8b8b8b;
}

.btn-box {
  text-align: center;
  margin: 50px 0;
}

<form action="./includes/login.inc.php" method="post">
    <div class="group">
        <input type="text" name="emailuid"/><span class="highlight"></span><span class="bar"></span>
        <label>Email</label>
    </div>
    <div class="group">
        <input type="password" name="pwduid"/><span class="highlight"></span><span class="bar"></span>
        <label>Password</label>
    </div>
    <div class="btn-box">
        <button class="btn btn-submit" type="submit" name="login-submit">Sign in</button>
    </div>
</form>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

To implement this functionality using jQuery, utilize the .focus() and .blur() functions. Begin by establishing a class with the style for your label when it is focused. Upon input focus, check if it contains a value. If so, retain the focused class; otherwise, remove it. Refer to the code snippet below:

css

label.focused {
    top: -14px;
  font-size: 12px;
  color: #FF3B3F;
}

jQuery

$('input').focus(function() {
  $(this).siblings('label').addClass('focused');
}).blur(function () {
  if($(this).val().length == 0) {
    $(this).siblings('label').removeClass('focused');
  }
});

Full code

$('input').focus(function() {
  $(this).siblings('label').addClass('focused');
}).blur(function () {
  if($(this).val().length == 0) {
    $(this).siblings('label').removeClass('focused');
  }
});

form {
  width: 320px;
  margin: 45px auto;

}
form h1 {
  font-size: 3em;
  font-weight: 300;
  text-align: center;
  color: #2196F3;
}
form h5 {
  text-align: center;
  text-transform: uppercase;
  color: #c6c6c6;
}
form hr.sep {
  background: #2196F3;
  box-shadow: none;
  border: none;
  height: 2px;
  width: 25%;
  margin: 0px auto 45px auto;
}
form .emoji {
  font-size: 1.2em;
}

.group {
  position: relative;
  margin: 45px 0;
}

textarea {
  resize: none;
}

input,
textarea {
  background: none;
  color: #4F4F4F;
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 320px;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #4F4F4F;
}
input:focus,
textarea:focus {
  outline: none;
}
/*input:focus ~ label,
textarea:focus ~ label {
  top: -14px;
  font-size: 12px;
  color: #FF3B3F;
}*/

label.focused {
    top: -14px;
  font-size: 12px;
  color: #FF3B3F;
}

input:focus ~ .bar:before,
textarea:focus ~ .bar:before {
  width: 335px;
}

input[type="password"] {
  letter-spacing: 0.3em;
}

label {
  color: #4F4F4F;
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
}

.bar {
  position: relative;
  display: block;
  width: 320px;
}
.bar:before {
  content: '';
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: #FF3B3F;
  -webkit-transition: 300ms ease all;
  transition: 300ms ease all;
  left: 0%;
}

.btn {
  background: #fff;
  color: #959595;
  border: none;
  padding: 10px 20px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  outline: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn:hover {
  color: #752021;
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
}
.btn.btn-link {
  background: #FF3B3F;
  color: #d3eafd;
}
.btn.btn-link:hover {
  background: #0d8aee;
  color: #deeffd;
}
.btn.btn-submit {
  background: #FF3B3F;
  color: white;
}
.btn.btn-submit:hover {
  background: #752021;
  color: white;
}
.btn.btn-cancel {
  background: #eee;
}
.btn.btn-cancel:hover {
  background: #e1e1e1;
  color: #8b8b8b;
}

.btn-box {
  text-align: center;
  margin: 50px 0;
}

<form action="./includes/login.inc.php" method="post">
    <div class="group">
        <input type="text" name="emailuid"/><span class="highlight"></span><span class="bar"></span>
        <label>Email</label>
    </div>
    <div class="group">
        <input type="password" name="pwduid"/><span class="highlight"></span><span class="bar"></span>
        <label>Password</label>
    </div>
    <div class="btn-box">
        <button class="btn btn-submit" type="submit" name="login-submit">Sign in</button>
    </div>
</form>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Text overlapping when input is selected

Answer №1

Similar questions

Samsung mini devices experiencing issues displaying Unicode symbol (25be)

"Exciting developments in Angular 17 with the introduction of the new @

Troubleshooting IE7's overflow problem

transferring background-image in html between elements

Retrieve the HTML code from a file and store it in a JavaScript variable

I am having trouble getting this code to display divs in two separate columns. How can I go about achieving that?

Arrange objects to have identical beginning points

The Carousel Slider seems to encounter issues when trying to implement it with *ngFor in Angular 8

Ensuring Your IMG is Perfectly Centered in DIV Across all Browsers

Challenges arise when transferring data retrieved from a table into a bootstrap modal window

What is causing the lack of HTML formatting in the emails being sent by my PHP contact form?

Retrieve data from an SQL database and populate an HTML dropdown menu in a web page using PHP

Transformation of HTML occurs in React components upon saving in Visual Studio Code

What are the steps to adjust the width of an HTML table cell?

Creating a modal popup when a button is clicked

Tips for altering the text color of the highlighted row in a Material UI table

Issues with font compatibility across different domains

Struggling with sending mail using javascript and ajax?

Using inline JavaScript to style an element when clicked

I am encountering issues with certain sections of my HTML and PHP coding