Placeholder (.floating-label) should slide up.. Issue

HTML & CSS
1

I am trying to slide my floating-label up on focus, but I am getting weird output, I am not getting that where I am doing something wrong, plezse help me out to fix this issue.

> HTML
> <div class="input-group ml15 mt20 column90">       
>     <input type="text" class="form-control navbar-input" name="x">
> 	 <span class="floating-label">Your email address</span>
> 	 <span class="input-group-btn">
> 	      <button class="btn header-navbar-button header-navbar-buttonRight" type="button">
> 											check IMEI
> 										</button>
> 	</span>
> </div>

CSS:

> .input-group input:focus ~ .floating-label,
> .input-group input:not(:focus):valid ~ .floating-label{
>   top: 8px;
>   bottom: 10px;
>   left: 20px;
>   font-size: 11px;
>   opacity: 1;
> }

> .input-group.inputText {
>   font-size: 14px;
>   width: 200px;
>   height: 35px;
> }

> .input-group.floating-label {
>   position: absolute;
>   pointer-events: none;
>   left: 20px;
>   top: 18px;
>   transition: 0.2s ease all;
> }

I have uploade my plage here for your reference:
http://www.acmearchitectural.com/cricketSales04042018/dashboard.html

The floating-label example I have taken from here:

here on js fiddle it is working fine but when I am implementing it on my page it is giving some weird output…

your early reply would appreciated…

thanks

2

<offtopic>
@shahzadsiddiqui8 when you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.
</offtopic>

2 Likes
3

Hi there shahzadsiddiqui8,

you really should use the semantically correct
“label element” instead of the “span element”

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 100% / 160% verdana, arial, helvetica, sans-serif;
 }

.inputHolder{
    position: relative;
    display: inline-block;
    border: 1px solid #999;
    overflow: hidden;
 }

.inputText {
    width: 13em;
    padding: 0.75em;
    border: 0;
    box-sizing: border-box;
    font-size: 1em;
 }

label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.7em 0.5em;
    background-color: #fff;
    box-sizing: border-box;
    transition: 0.25s ease;
 }

.inputText:focus + label,
.inputText:not( :focus ):valid + label{
    top: -0.5em;
    padding: 0 0.75em;
    font-size: 0.75em;
    background-color: transparent;
 }
</style>

</head>
<body> 

 <div class="inputHolder">
  <input type="email" id="email" class="inputText" required >
  <label for="email">Your email address</label>
 </div>

</body>
</html>

coothead

3 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.