Keep label at the forefront once input field is completed

Is it possible to keep my label positioned on top of the input field even after filling in data?

I attempted using the valid function in CSS, but did not achieve the desired functionality.

.txt_field input {
  width: 100%;
  padding: 0 5px;
  height: 40px;
  font-size: 16px;
  border: none;
  background: none;
  outline: none;
}

.txt_field label {
  position: absolute;
  top: 65%;
  left: 5px;
  color: #adadad;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
  transition: .3s;
}

.txt_field input:focus~label {
  top: 0px;
  color: #0170C1;
}
<div class="txt_field">
  <i class="fa fa-user"></i>
  <input type="text" class="textbox" id="username" placeholder="">
  <label>PhoneNumber/Email</label>
</div>

I have tried .txt_field input:focus ~valid, but unfortunately the label keeps overlapping with the input data.

Seeking advice on how to ensure the label remains on top once the input field is filled.

htmlcss

Answer №1

Implement the :placeholder-shown pseudo-class to determine if an input is filled, and utilize the ::placeholder pseudo-elements selectors to hide unwanted placeholder text.

Additionally, ensure you apply position:relative; to the .txt_field for optimal display.

It is recommended to use the + selector over the ~ selector in this scenario.

Note: The input tag must have a non-empty placeholder attribute.

.txt_field{
    position:relative;
}

.txt_field input {
    width: 100%;
    padding: 0 5px;
    height: 40px;
    font-size: 16px;
    border: none;
    background: none;
    outline: none;
}

.txt_field label {
    position: absolute;
    top: 65%;
    left: 5px;
    color: #adadad;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    transition: .3s;
}

.txt_field input:focus+label, .txt_field input:not(:placeholder-shown)+label {
    top: 0px;
    color: #0170C1;
}

.txt_field input::placeholder {
    color: transparent;
}
<div class="txt_field">
    <i class="fa fa-user"></i>
    <input type="text" class="textbox" id="username" placeholder="if empty will not work">
    <label>PhoneNumber/Email</label>
</div>

Answer №2

.txt_field input {
  width: 100%;
  padding: 0 5px;
  height: 40px;
  font-size: 16px;
  border: none;
  background: none;
  outline: none;
  
  background-color: rgba(0,0,0,.1);
}

.txt_field label {
  position: absolute;
  top: 65%;
  left: 5px;
  color: #adadad;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
  transition: .3s;
}

.txt_field input:focus~label,
.txt_field input:not(:placeholder-shown)~label{
  top: 0px;
  color: #0170C1;
}
<div class="txt_field">
  <i class="fa fa-user"></i>
  <input type="text" class="textbox" id="username" placeholder="">
  <label>PhoneNumber/Email</label>
</div>

Answer №3

There are two key points to keep in mind:

1- Familiarize yourself with the structure of HTML and recognize its significance.

2- Understand both display and positioning of elements. Mastering these concepts will help you accurately position elements as needed.

Avoid using position: absolute; in this scenario. Also, why is your input set at 100% width? This is not considered proper practice.

.txt_field input {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 300px;
    padding: 0 5px;
    height: 40px;
    font-size: 16px;
    border: none;
    background: none;
    outline: none;

    border: 1px solid red;
  }
  
  .txt_field label {
    /* position: absolute; */
    color: #adadad;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    transition: .3s;

    border: 1px solid orange;
  }
  
  .txt_field input:focus~label {
    top: 0px;
    color: #0170C1;
  }
<div class="txt_field">
    <i class="fa fa-user"></i>
    <label>PhoneNumber/Email</label>
    <input type="text" class="textbox" id="username" placeholder="">
    
  </div>

Answer №4

To achieve this effect, use the translate feature as shown below:

.input:focus ~ .placeholder,
.input:not(:placeholder-shown) ~ .placeholder {
  transform: translateY(-30px) translateX(10px) scale(0.75);
}

Additionally, be sure to add a transition for a smoother animation // transition: transform 200ms

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

Getting the most out of fonts with Webpack sass-loader

I recently set up a custom font in my project like this: $font-path: '~@/assets/fonts/'; @font-face { font-family: 'mainFont'; font-weight: 300; font-style: normal; src: url('#{$font-path}mainFont/mainFont.eot&apos ...

cssfontswebpackvue.jssass-loader

Styling with CSS or using tables: What should you choose?

Is there a way to replicate the frame=void functionality in CSS, or will I need to manually add frame=void to each table I create in the future? <table border=1 rules=all frame=void> I attempted to search for a solution online, but unfortunately, m ...

htmlcss

The JSX element 'body' appears to be missing its closing tag

I'm currently in the process of developing a landing page using react.js. This particular page is designed for users who are not yet signed up to create an account if they wish to do so. Unfortunately, I'm encountering some errors, one of which p ...

javascripthtmlreactjs

What is the best way to eliminate base tags from jQuery mobile scripts?

In jQuery Mobile, how can I remove the base href tags from the page and disable base href? Code Snippet: // Function to test for dynamic-updating base tag support function baseTagTest() { var fauxBase = location.protocol + "//" + location.host + l ...

javascriptjqueryhtml

Translucent" outline for an "opaque" object

Consider the following HTML snippet: <div id="my_div"> </div> Now, let's take a look at the CSS code: #my_div { width: 100px; height: 100px; background-color: #0f0; op ...

htmlcss

Font icon not appearing when toggling the class "before"

I am attempting to utilize two classes, both with a :before pseudo-element. When the target class is hovered over, the two classes swap. This functionality works correctly in Safari, but in other browsers, the icon at the bottom does not display properly. ...

jquerycss

Learning the basics of JavaScript: Displaying the last number in an array and restarting a function

Hey there, I'm diving into the world of JavaScript and have set myself a challenge to create a simple bingo number machine. Check out my CodePen project here. I've successfully generated an array of 20 numbers, shuffled them, and added a marker t ...

javascripthtmlcss

The HTML content is not responsive to varying screen sizes

Currently, I am in the process of developing a Wordpress page using WPBakery Page Builder. To enhance the design, I extracted some HTML/CSS code from an existing page by using SnappySnippet and pasted it into the new page within a "Pure html" block. Howeve ...

htmlcsswordpressscreen

What is the reason behind the inability of this YouTube instant search script to enable fullscreen mode?

Looking to implement a Youtube instant search on my website, I came across this script that seems ideal for my needs. However, I'm facing an issue where the iframe is not displaying the allowfullscreen property. Can anyone assist with this problem? Th ...

javascriptjqueryhtmlajax

Explore button that gradually decreases max-height

I have a "Show More" button that expands a div by removing the css attribute max-height, but I want to add an animation similar to jQuery's slideToggle() function to smoothly reveal the rest of the content. This is the code I am using: <div id="P ...

javascriptjqueryhtmlcss

Extracting HTML element from PHP string and placing it in a different page

In a PHP string, there is an HTML structure including a table within it: <html> <head> <!-- not much going on here --> </head> <body> <table border="0" align="center" cellpadding="0" cellspacing="10 ...

javascriptphpjqueryhtml

Display numerical data at precise locations above an image

Currently, I am working on a project where I am adding multiple marker pins to an image and saving their positions (x and y coordinates) to a database for later use. To see the code I have written so far, you can visit this link: https://jsfiddle.net/at3w ...

javascriptjqueryhtml

Having an issue with a cropped CSS box?

I have created a CSS box with a red background color, but for some reason the bottom left corner is being cut off. Can you provide an explanation for this issue? (Refer to the image below) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

jquerycss

Creating an Online Store with Python and Django for Server-side Development

Looking to create a dynamic E-commerce platform with Bootstrap, HTML, CSS, and JavaScript for the frontend, along with Python, Django, and MongoDB for the backend. Can someone provide me with step-by-step guidance on crafting code files for each language a ...

pythonhtmldjangobootstrap-4

Tips for positioning HTML elements at the exact mouse location as it moves, without any delay?

Currently, I am in the process of developing a web-based drawing application that does not rely on using a canvas. My decision to avoid using a canvas is because I plan to incorporate CSS Keyframes into the HTML elements upon placement. This approach allow ...

javascriptjqueryhtmldrawing

Navigating through Frames using Selenium in C#

I am facing an issue with using Selenium on this site. The elements I need to interact with are within a 'frame' that is inside a 'frameset'. Here is the relevant HTML snippet: <frameset rows="0%, 95%" frameborder="0" frameSpacing=" ...

c#htmlseleniumframeframeset

In PowerShell, use the "ConvertTo-Html" commandlet to incorporate

I have a script that retrieves data from a server, converts it to HTML, and then sends the report via email. Here is a snippet of the script: $sourceFile = "log.log" $targetFile = "log.html" $file = Get-Content $sourceFile $fileLine = @() foreach ($Line i ...

htmlcssclasspowershell

Steps on displaying a fresh div containing an identical input box within the original parent div

I am looking to create a search feature with a text box and popup aligned at the top left corner of the window. The navbar already contains a search input box, but when clicked, I want to display another div that mirrors the width and content of the origin ...

htmlcssbootstrap-4

Utilize JavaScript and HTML to show error messages based on whether the user is deactivated or if the input is invalid

I need to show different error messages under the 'Email Address' input if the user is disabled and under the 'Password' input if the user is invalid. In my debugging process, I discovered that a user being disabled results in a "Status ...

javascripthtmlangularjs

What is the best way to adjust the size of a Div slideshow using

I need help with creating a slideshow that covers my webpage width 100% and height 500px. The image resolution is 1200*575. Can someone assist me with this? CSS #slide{ width : 100%; height: 500px; } HTML <!DOCTYPE html> <html> ...

javascriptjqueryhtmlcss