When attempting to shift the label above the input field upon focusing, it unexpectedly becomes concealed

I am attempting to reposition the label above the input field when it is focused, but instead it becomes hidden.

label > span::focus  {
  top: -20px; 
  font-size: 15px;
  color: blue;           
}

Check out the complete Html & CSS code.

Update:

I managed to solve the issue by adjusting some HTML classes and elements like this:

.user-input:focus + .user-label > span { 
  margin-top: -15px;
  font-size: 10px;
  color: blue;
htmlcss

Answer №1

Perhaps You Require Something Along These Lines

  

 * {
box-sizing: border-box;
}

.group {
position: relative;
margin-bottom: 45px;
margin-top: 45px;
}

input {
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
}

input:focus {
outline: none;
}

label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}

input:focus~label,
input:valid~label {
top: -20px;
font-size: 14px;
color: #5264AE;
}

input:focus~.bar:before,
input:focus~.bar:after {
width: 50%;
}

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


/* active state */

input:focus~.highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}


/* ANIMATIONS ================ */

@-webkit-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}

@-moz-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}

@keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
<form>
    
    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Name</label>
    </div>
      
    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Email</label>
    </div>
    
  </form>

Answer №2

When commenting previously:

It is not possible to style the label (previous sibling selector) when focusing on the next input.

To solve this issue, you need to position the label after the input in the HTML and use 'position:relative' instead of 'absolute'.

Check out the code here

body {
  background-color: #f0f0f0;
}

form {
  margin-left: 39%;
  margin-top: 9%;
}
label {
  position: relative;
  margin-left: 0%; 
  font-family: monospace, 'Montserrat', sans-serif;
  font-size: 15px;
  padding-top: 3px; 
 /* border: 5px solid black;*/ 
}

.head {
margin-left: 43%;
margin-top: 5%;
font-size: 25px;
font-family: monospace;

}

.password {
  margin-top: 5%; 
}


.input-field {
  position: absolute;
  background: transparent;
  border-width: 2px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background: transparent;
  outline: 0;
  height: 23px;
  border-color: black;
  width: 180px;
} 


input:focus {
  background: #fae596;
  border: 0;
}

input:focus + .label   {
  top:-20px; 
  font-size: 15px;
  color: blue;           /* font color while on top */
}
<p class="head">Sign In</p>
<form>

    <div class="username">
      
      <input type="text" name="name" class="input-field" id="user"/> <!--input filed-->
      <label for="user" class="label"><span>Username</span></label>
    </div>

    <br>
    <br>
    <div class="password">
      <input type="text" name="name" class="input-field" id="pass" />
      <label for="pass" class="label"><span>Password</span></label>
    </div>
  
</form>

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

What is the purpose of making a "deep copy" when adding this HTML content?

My canvas-like element is constantly changing its contents. I am attempting to execute a function on each change that captures the current content and adds it to another element, creating a history of all changes. window.updateHistory = func ...

javascriptjqueryhtmlcopyappend

Preventing an iframe from reloading when transferring it to a new parent using appendChild

I'm looking to relocate an iframe to a different parent element while maintaining the iframe's current state (including scroll position and any entered form data). Unfortunately, when I use appendChild() to move the iframe, it reloads and resets ...

javascripthtmliframe

Notification feature experiencing technical difficulties

I have encountered an issue with a simple message form that I created. While the message is sent successfully and a thank you page is displayed, there are two errors that occur. The first error is: Notice: Undefined index: name in public_www/n..../contact- ...

phphtmlforms

Looking to tally up the variety of items in Django?

Before, I had a table with a client summary list. One column showed object types and the other displayed the quantity of each object type. @login_required def client_summary(request, client_id): client = models.Client.objects.get(pk = client_id) i ...

pythonhtmldjangotagscount

Is it possible to dynamically render css using Express.js?

I have a need to dynamically generate CSS with each request. For example, in my Express.js application, I've set up a route like this: /clients/:clientId/style.css When a matching request is received, I want to retrieve the Client from the reposito ...

csslessexpressstylus

Learning the process of using JavaScript to extract data from a JSON file containing arrays

Currently grappling with the challenge of reading a JSON file using JavaScript. Unsure if my JSON file is in the correct format with arrays, but here is what I have. [ { "passageNumber":"2.3.1", "title":"Inside and out: A bronze ...

javascriptjqueryhtmljsonjquery-plugins

Is it possible for CSS to prevent the insertion of spaces?

When filling out a form, I am able to insert spaces in inputs but not in the textarea (which is necessary). Interestingly, inserting spaces in the textarea works flawlessly. <form action="/#wpcf7-f519-o1" method="post" class="wpcf7-form" enctype="mu ...

javascriptjqueryhtmlcsswordpress

After the form is successfully submitted, you can remove the required attribute

Upon clicking the submit button of a form, an input box is highlighted with a red border if empty. After successful jQuery AJAX form submission, a message "data submitted" is displayed and the form is reset causing all input fields to be highlighted in red ...

javascriptjqueryhtmlajaxforms

Tips for recognizing components within the #document are as follows:

I am currently utilizing xpath to extract data from a dynamic table in an HTML document. The specific information I am looking for is contained within a tag identified as #document. However, I am encountering difficulties including this unique element in ...

pythonhtmlseleniumxpathiframe

Tips for wrapping the content of a <span> element within a <td> element

Can someone help me figure out how to wrap the content of a <span> tag that is inside a <td>? The style I have applied doesn't seem to be working. Here's the code snippet: <td style="white-space:nowrap;border:1px solid black"> ...

htmlcssasp.net

Exploring numerous choices within a multi-select "category" search bar (web scraping)

Looking to scrape data from this French website using Python and the bs4 library: the content is in french :) . Specifically interested in extracting all possible values of a multi-select search bar named 'TYPE DE BIENS'. This type of search bar ...

javascripthtmlselenium-webdriverweb-scraping

The secret to achieving perfectly even spacing along the vertical axis

I'm working on a card design that contains a div with 3 elements - 2 headers and a paragraph. I need to ensure there is consistent spacing between each element and the top/bottom of the card. Currently, there seems to be too much margin after the last ...

htmlcss

Creating a three-row CSS layout where the middle row aligns to the right side

I am working on developing a mobile device layout with 3 blocks. The first and third blocks contain text fields, while the second block is filled with a map. However, all of my blocks don't look good when they are too wide. The browser window can have ...

javascripthtmlcss

Extract data with Python Selenium

Can someone help me figure out how to extract the value "document sent" from the HTML code below using Python's Selenium library? I've tried the code snippet provided, but it returns None. print(driver.find_element_by_id('errorMessage' ...

pythonhtmlselenium

Ways to prevent a page from scrolling

I'm currently working on a webpage that features a vertical drop-down menu. The issue I'm facing is that when the menu drops down, it causes the text below it to be pushed downwards and off the page. While this behavior is anticipated, it also tr ...

htmlcssscroll

Stop horizontal overflow of content

This unique Vuetify demo on CodePen showcases a two-column layout. The first column contains a <v-list> enclosed in a green <v-alert>. By clicking the "toggle text" button, you can switch the title of the first list item between short and long ...

cssvue.jsvuetify.js

When I try to expand the width of a div, the display property set to inline

Visit my website At the moment, my website features the following code snippet: <div class="main-sale"> <div class="time-left">Sale Ends in: </div> <div class="sale-item"> //Highlighted Sale it ...

jqueryhtmlcss

Is it possible for me to adjust these two images to fit the screen perfectly?

Technologies: CSS React JPG/PNG Objective: I am striving to resize two images to achieve this desired look: https://i.stack.imgur.com/B1b0h.png I am currently developing a 'skirt customizer' for either my mom or portfolio, where users can m ...

htmlcssimage

Using CSS nth-of-type on the same level of the DOM allows for specific

I was having trouble using the nth-of-type(2n+1) selector to target odd and even rows in the scenario below. What I wanted was for the nth-of-type selector to apply different styles to the odd rows with the classes "row-data row-header" and "row-data row-c ...

javascriptjqueryhtmlcss

Selecting elements using XPath

My goal is to target an i element using the following XPath: //div[contains(text(), "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32565356564153565341725e5d5d1c515d5f">[email protected]</a>")]//parent//i[contains(@c ...

htmlseleniumxpathselenium-webdriver