The problem with Text Input and Label Effects

This code is currently in use.

It seems to be working fine, but there's one issue that needs addressing: when moving from one input field to the next, the labels for each field are getting mixed up with their corresponding inputs. This problem will become apparent once you review my code.

<div class="row">
    <div class="container">

        <h2>Input with Label Effects</h2>
        <div class="col-3 input-effect">
            <input class="effect-16" type="text" placeholder="">
            <label>First Name</label>
            <span class="focus-border"></span>
        </div>
        <div class="col-3 input-effect">
            <input class="effect-17" type="text" placeholder="">
            <label>First Name</label>
            <span class="focus-border"></span>
        </div>
        <div class="col-3 input-effect">
            <input class="effect-18" type="text" placeholder="">
            <label>First Name</label>
            <span class="focus-border"></span>
        </div>

    </div>
</div>


/*= Reset CSS 
============= */
html, body {border: 0; margin: 0; padding: 0;}
body {font: 14px "Lato", Arial, sans-serif; min-width: 100%; min-height: 100%; color: #666;}
.container{margin: 0 auto; max-width: 1200px;}
*{margin: 0; padding: 0; box-sizing: border-box;}
.row{float: left; width: 100%; padding: 20px 0 50px;}
h2{text-align: center; color: #2079df; font-size: 28px; float: left; width: 100%; margin: 30px 0; position: relative; line-height: 58px; font-weight: 400;}
h2:before{content: ""; position: absolute; left: 50%; bottom: 0; width: 100px; height: 2px; background-color: #2079df; margin-left: -50px;}
/*= Reset CSS End
================= */

/*= Input focus effects CSS
=========================== */
:focus{outline: none;}

.col-3{float: left; width: 27.33%; margin: 40px 3%; position: relative;} /* necessary to give position: relative to parent. */
input[type="text"]{font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;}

.effect-16, 
.effect-17, 
.effect-18{border: 0; padding: 4px 0; border-bottom: 1px solid #ccc; background-color: transparent;}

.effect-16 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-16:focus ~ .focus-border,
.has-content.effect-16 ~ .focus-border{width: 100%; transition: 0.4s;}
.effect-16 ~ label{position: absolute; left: 0; width: 100%; top: 9px; color: #aaa; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
.effect-16:focus ~ label, .has-content.effect-16 ~ label{top: -16px; font-size: 12px; color: #3399FF; transition: 0.3s;}



// JavaScript for label effects only
    $(window).load(function(){
        $(".col-3 input").val("");

        $(".input-effect input").focusout(function(){
            if($(this).val() != ""){
                $(this).addClass("has-content");
            }else{
                $(this).removeClass("has-content");
            }
        })
    });

Fiddle link:- https://codepen.io/Balvant_Ahir/pen/wxZjxP

Answer №1

To successfully implement your project, ensure that you have Jquery included.

Insert the following code snippet into your HTML:

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

// JavaScript for label effects only
$(window).load(function(){
$(".col-3 input").val("");

$(".input-effect input").focusout(function(){
if($(this).val() != ""){
$(this).addClass("has-content");
}else{
$(this).removeClass("has-content");
}
})
});
/*= Reset CSS 
============= */
html,
body {
  border: 0;
  margin: 0;
  padding: 0;
}
body {
  font: 14px "Lato", Arial, sans-serif;
  min-width: 100%;
  min-height: 100%;
  color: #666;
}
.container {
  margin: 0 auto;
  max-width: 1200px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.row {
  float: left;
  width: 100%;
  padding: 20px 0 50px;
}
h2 {
  text-align: center;
  color: #2079df;
  font-size: 28px;
  float: left;
  width: 100%;
  margin: 30px 0;
  position: relative;
  line-height: 58px;
  font-weight: 400;
}
h2:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100px;
  height: 2px;
  background-color: #2079df;
  margin-left: -50px;
}
/*= Reset CSS End
================= */

:focus {
  outline: none;
}

.col-3 {
  float: left;
  width: 27.33%;
  margin: 40px 3%;
  position: relative;
} /* necessary to give position: relative to parent. */
input[type="text"] {
  font: 15px/24px "Lato", Arial, sans-serif;
  color: #333;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 1px;
}


// Rest of the CSS and HTML code is provided in the initial response

Answer №2

Transform your JQuery code to Vanilla JS and experience the magic!

document.querySelectorAll('.input-effect input').forEach(element => {
  element.addEventListener('focusout', function () {
    if(this.value && !this.classList.contains('has-content')){
      this.classList.add('has-content')
    } else if (!this.value){
      this.classList.remove('has-content')
    }
  })
})
/*= Reset CSS 
============= */
html, body {border: 0; margin: 0; padding: 0;}
body {font: 14px "Lato", Arial, sans-serif; min-width: 100%; min-height: 100%; color: #666;}
.container{margin: 0 auto; max-width: 1200px;}
*{margin: 0; padding: 0; box-sizing: border-box;}
.row{float: left; width: 100%; padding: 20px 0 50px;}
h2{text-align: center; color: #2079df; font-size: 28px; float: left; width: 100%; margin: 30px 0; position: relative; line-height: 58px; font-weight: 400;}
h2:before{content: ""; position: absolute; left: 50%; bottom: 0; width: 100px; height: 2px; background-color: #2079df; margin-left: -50px;}
/*= Reset CSS End
================= */

/*= input focus effects css
=========================== */
:focus{outline: none;}

.col-3{float: left; width: 27.33%; margin: 40px 3%; position: relative;} /* necessary to give position: relative to parent. */
input[type="text"]{font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;}
// Remaining CSS properties...

</div>
<div class="row">
    <div class="container">
    
        <h2>Input with Label Effects</h2>
        <div class="col-3 input-effect">
        <input class="effect-16" type="text" placeholder="">
            <label>First Name</label>
            <span class="focus-border"></span>
        </div>
        <div class="col-3 input-effect">
        <input class="effect-17" type="text" placeholder="">
            <label>First Name</label>
            <span class="focus-border"></span>
        </div>
        <div class="col-3 input-effect">
        <input class="effect-18" type="text" placeholder="">
            <label>First Name</label>
            <span class="focus-border"></span>
        </div>
      
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to transfer all the formatting from the original file for the window.print() function. Localhost is functioning properly, but encountering issues with production

I'm encountering an issue with getting all styles from my Vue app. I have tried the code provided in this answer: https://stackoverflow.com/questions/52343006/how-to-print-a-part-of-a-vue-component-without-losing-the-style While it works fine on loc ...

Can anyone help me troubleshoot this issue with uploading external JS scripts into my HTML code?

I'm currently facing an issue with my HTML document where the external js file is not loading. Here's a snippet of the HTML: <!DOCTYPE html> <html> <head> <title>...</title> <meta name="viewport" conten ...

Issue with interactive rows in a table ( Rails Version 4 )

I am encountering an issue with a table that is linked to a customer show page _table.html.erb <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr> <th width="50"><%= sort_link ...

What are the steps to create an endless scrolling feature?

I'm trying to create a slider with a horizontal scrolling effect, but I've hit a roadblock. How can I make the slider scroll infinitely? In my code, you can see that after Item 6, it stops scrolling and I have to scroll backward. However, I want ...

Enhance container and typography for layouts converted to 1920px width to improve overall design

Greetings to all! I need some assistance with converting a design file that is 1920px wide into an HTML layout. Can someone provide tips on optimizing containers and typography for responsiveness? Specifically, I would like the font-size and line-height ...

Switching text and updating form action on button press using jquery

My current issue is that the button on my form is only partially working. Initially, it displays 'add' and directs to the 'add.php' file, but upon clicking the button, the text does not change and the submission doesn't go to the & ...

What is the best way to add 1 to a number every second with javascript?

My code seems to be functioning correctly, but I'm having trouble setting the delay and stopping the increment after a certain interval. Can someone please assist me with this? Javascript: $(document).ready(function() { var number = parseInt($(& ...

Utilizing HTML's multiple input type color feature to save selected colors directly to the database

I am currently using the input type color to select colors for customizing my site. I save the selected color to a database and then retrieve it to apply it to different areas of the site. This works well for a single input type color, but now I have mul ...

Having trouble with installing create-react-app for my_app using npm because it seems to be stuck on f

I've hit a roadblock while trying to create a react app on my 2011 MacBook Pro. To start, I downloaded the latest version of Node from their official website. Following the instructions from React documentation, I ran the following commands: npm uni ...

Customizing the input field to have a width of 100%

Could someone provide a solution, like a link or working example, for creating input fields with rounded corners that have a width of 100% and a customizable right border? Here is the current structure I am using: <span class="rounded left-corner" ...

Guide to dynamically assigning v-on with v-for

I'm working on a Vue code that dynamically creates a menu using v-for, with each element requiring a different method when clicked. Here's what I have so far: <span v-for="(menuItem, index) in menuItems" :key="index"> ...

Issue with PageSpeed and Lighthouse showing NOT_HTML error post recent update

Our team decided to utilize the tool at for assessing the speed of our website. This tool has been effective in analyzing our site's URLs for some time now. However, recently we have encountered an issue where we receive the following error message: ...

Covering a secret link with a backdrop image

I have set a background image in a column on my WordPress site. However, I want to make this image clickable by placing a transparent box over it, as background images cannot be linked directly. #container { background-image: url(https://www.quanser.c ...

Utilizing jQuery to dynamically update background colors within an ASP repeater based on the selected value of a dropdown list

On my asp.net web page, I have a repeater that displays a table with various fields in each row. I am trying to make it so that when the value of a dropdown within a repeater row changes, the entire row is highlighted in color. While I have achieved this s ...

Adding HTML elements to a Vue Tooltip

Does anyone know how to implement a tooltip in Vue for a table cell that has more than 22 characters in its content? I was looking into using the v-tooltip library (https://www.npmjs.com/package/v-tooltip) Setting the tooltip's content with a simple ...

Padding issue with Dropotron plugin not functioning properly

I'm struggling to reduce the right space on my drop-down menus. https://i.sstatic.net/rz3r3.jpg Here's what I've tried: .dropotron li { box-shadow: inset 0 1px 0 0 #e6e6e6; padding-right: 0 !important; } U ...

Harmonizing controls with ASP.NET using CSS styling

I have created a web form application which is displayed in the image provided. However, when I view the same page in the browser, the output appears completely misaligned despite the designer file being perfect. The markup for this form is quite lengthy ...

Creating a responsive design for a centered image with absolute positioning

I'm trying to align an image at the bottom of a div while also centering it using the following CSS: HTML: <div class="myDiv"> <img src="http://bit.ly/1gHcL8T" class="imageCenter" /> </div> CSS: .myDiv { width: 80%; height: ...

Building pagination functionality in AngularJS by sending parameters to an AJAX service: A step-by-step guide

I'm looking to learn how to implement pagination on a page with 10 records per page. Despite my efforts in searching online, I haven't been able to find any helpful resources explaining this concept. I would greatly appreciate a simple example or ...

Is the CSS parser malfunctioning?

My program is designed to scan css files using the jar cssparser-0.9.5.jar and perform various operations on the data. public static Map<String, CSSStyleRule> parseCSS(String FileName) throws IOException { Map<String, CSSStyleRule> rul ...