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

A unique flex layout with scrolling capabilities specifically designed for optimal performance in Chrome

This layout includes a header, footer, sidebar, and a scrolling main content section. You can view a demonstration of this design on Bootply. <div class="parent"> <div>HEADER</div> <div class="main"> <div class="side"> ...

htmltwitter-bootstrapcssflexbox

Unable to load CSS styles from SCSS when rendering the view

I am having trouble loading styles on my webpage from SCSS. Below is the code from my Gulp.js file: // Compile and Automatically Prefix Stylesheets gulp.task('styles', function () { return gulp.src([ 'Content/styles/**/*.scss&apo ...

cssangularjsgulp

showcasing the picture in the email is consistently

I have created an email system that sends a message to users when they are active in the database, but I am experiencing an issue with the image not displaying. It is important for the image to appear automatically, just like Facebook's logo always sh ...

phphtmlcss

I've encountered an issue when attempting to use innerHTML for DOM manipulation

I've been attempting to remove a specific list item <li> from the inner HTML by assigning them proper IDs. However, I'm encountering difficulties in deleting it. How can I delete these list items after clicking on the cross button? Feel fr ...

javascripthtmlcssinnerhtml

List with Columns for Organization

I am not seeking advice on how to use columns in lists, but rather on aligning the columns on my website. Below is the code I have: <ol class="threecolumns"> <li>Item 1</li> <li>Item 2</li> <li>Item 3< ...

htmlcss

Display items inside containers using angularjs ng repeat and bootstrap styles, however, the layout is not being rendered correctly

I am struggling to display products in boxes on my ecommerce website, similar to how they appear on other platforms. Although I am utilizing AngularJS ng-repeat and bootstrap classes, the layout of the products is not coming out as intended. Take a look ...

cssangularjsbootstrap-ui

Tips for showcasing content by hovering over buttons with the help of Bootstrap3 and Jquery

My code and fiddle are currently set up to display buttons when hovered over, but I want to modify it so that only the relevant button is displayed when a specific text is hovered over. For example, if "Water" is hovered over, only the button for Water sho ...

javascripthtmljquerycss

Exploring the world of interactive storytelling through a basic PHP text adventure

I recently completed coding a text adventure using functions like fgets(STDIN) that works in the command line. Now, I want to convert it to run on HTML (internet browser) but I'm facing a challenge. I am unsure how to transition from this: $choose=0; ...

phphtmlfunction

Explore by the anchor tag

I've recently implemented a search bar utilizing Bootstrap. This is the code for the search bar: <div class="md-form mt-0"> <input class="form-control" id="myInput" type="text" placeholder="Sear ...

javascripthtmljquerybootstrap-4

Express JS backend causing CSS file to fail to load in React project

After doing some research on Stack Overflow, I came across a few solutions but none of them seemed to work for my specific situation. I am currently attempting to serve my React website from an Express backend server. Here is the layout of my folders: cli ...

javascriptcssnode.jsexpress

What is the best approach to create a JavaScript search filter function spanning two pages?

Page1.html has a form with a drop-down menu containing options Color and Shape. There is also a submit button. Assuming Page2.html displays various shapes like Blue Square, Red Square, Blue Circle, Red Circle, is it feasible to create a JavaScript file th ...

javascriptjqueryhtmlcssfilter

Robotic Arm in Motion

GOAL: The aim of the code below is to create a robotic arm that consists of three layers (upper, lower, and middle), all connected to the base. There are four sliders provided to independently move each part except for the base which moves the entire arm. ...

javascripthtmlcsshtml5-canvaswebgl

Position div elements randomly on the webpage when it first loads

I am trying to achieve a set of divs that will appear randomly on the page when it loads. Currently, I have the divs moving around the viewport in a random manner, but they all seem to load in the top left corner. This is the method I am currently using: ...

javascriptjquerycsspositionpositioning

Error encountered: Unrecognized media in CSS validation and parsing issue

I've been having trouble validating my CSS and keep encountering error messages. Despite ensuring I have closing brackets, there are parse errors on line 39 and unrecognized media issues on lines 79 and 81. Additionally, lines 70 and 89 also trigger p ...

htmlcss

Spinning Circle with css hover effect

I have recently developed a simple website: Within this website, there is an interesting feature where a circle rotates above an image on hover. However, despite my best efforts, I couldn't make it work as intended. Here's the code snippet I use ...

htmlcss

What can I do to stop my list items from dropping below the menu even when there isn't enough space?

I'm facing an issue with my menu and despite several attempts, I can't seem to resolve it. In Firefox, everything looks fine, but in other browsers, the last anchor tag inside my menu keeps collapsing underneath. I've tried various solutions ...

csscss-float

What is the best location to integrate jQuery UI Bootstrap in a Rails project

In order to use Bootstrap and jQuery UI together in my application, I decided to integrate jQuery UI Bootstrap. Unfortunately, many of the gems that handle asset pipeline integration seem outdated, so I opted to manually download the CSS files and insert t ...

jquerycssruby-on-railstwitter-bootstrapjquery-ui

Tips for verifying that a file has not been selected in Croppie

Whenever I use croppie to crop images on my website, everything works fine when I select an image and upload it. But if I try to crop and upload without selecting an image, a black image gets uploaded instead. How can I validate if the file upload is empty ...

javascriptphpjqueryhtmlcodeigniter-3

Updating website content dynamically using Javascript and JSON-encoded data

My programming code seems to be acting oddly. I have structured my data in a JSON object as follows: injectJson = { "title": "Champion Challenge Questions", "rules": [ { "idChrono": "chrono-minute", "text": "Top is missing!", ...

javascripthtmljsonvariablesundefined

Learn how to incorporate a consistent header and footer across multiple pages on a website with Node.js, ExpressJS, and either hbs or ejs templates

Creating a common header (navbar) and footer page to be included in multiple/several pages of a website. I want to create a dynamic website using Node.js and Express.js. The code for the navbar and footer will be placed in a common file named header.html ...

javascripthtmlnode.jsexpress