Floating labels with CSS only

Developer
Diéssica Gurskas
Size
3,966 Kb
Views
6,072
  1. Floating labels with CSS only Previews
  2. Floating labels with CSS only HTML Codes
  3. Floating labels with CSS only CSS Codes
  4. Floating labels with CSS only JS Codes

How do I make an floating labels with css only?

Just an CSS-only experiment that I wanted to share. =) I'm still improving it.Tested on Google Chrome (mobile too), Firefox and Opera.. What is a floating labels with css only? How do you make a floating labels with css only? This script and codes were developed by Diéssica Gurskas on 10 January 2023, Tuesday.

Floating labels with CSS only Previews
IQ Test

Floating labels with CSS only - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Floating labels with CSS only</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ input, label { padding: 30px 30px 10px 30px;
}
input { /* visual */ width: 100%; height: 75px; opacity: 0.5; background: #2c3e50; box-shadow: 9.375px 9.375px 0 #1e2a36; border: 0; border-radius: 6.25px; transition: all 700ms ease-in;
}
input:focus { background: #4d346b; box-shadow: 9.375px 9.375px 0 #392750;
}
label { /* on */ display: inline-block; position: relative; top: -75px; left: 0; /* end state */ transition: all 300ms ease 9999999s; /* visual */ text-transform: uppercase;
}
input:focus + label { top: -88px; /* visual */ font-size: 12.5px; font-weight: bold; /* end state */ transition: all ease 300ms;
}
* { box-sizing: border-box;
}
body, input { color: #fff;
}
body { font-family: "Open Sans"; background: url(https://i.imgur.com/D3HiN8e.jpg); /* center vertically */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 600px; height: 450px; margin: auto;
}
h1, h2 { font-weight: normal; text-align: center;
}
h1 { font-weight: bold; text-transform: uppercase; margin-bottom: 60px;
}
input.center { text-align: center;
}
label.center { width: 600px; text-align: center;
}
h2 { opacity: 0.5; margin-top: -40px;
}
label { cursor: text;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<h1>Floating labels with CSS only</h1>
<h2>~ default ~</h2>
<input id="email"/>
<label for="email">Your e-mail</label>
<h2>~ center ~</h2>
<input class="center" id="live"/>
<label class="center" for="live">Where do you live?</label> <script src="js/index.js"></script>
</body>
</html>

Floating labels with CSS only - Script Codes CSS Codes

input, label { padding: 30px 30px 10px 30px;
}
input { /* visual */ width: 100%; height: 75px; opacity: 0.5; background: #2c3e50; box-shadow: 9.375px 9.375px 0 #1e2a36; border: 0; border-radius: 6.25px; transition: all 700ms ease-in;
}
input:focus { background: #4d346b; box-shadow: 9.375px 9.375px 0 #392750;
}
label { /* on */ display: inline-block; position: relative; top: -75px; left: 0; /* end state */ transition: all 300ms ease 9999999s; /* visual */ text-transform: uppercase;
}
input:focus + label { top: -88px; /* visual */ font-size: 12.5px; font-weight: bold; /* end state */ transition: all ease 300ms;
}
* { box-sizing: border-box;
}
body, input { color: #fff;
}
body { font-family: "Open Sans"; background: url(https://i.imgur.com/D3HiN8e.jpg); /* center vertically */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 600px; height: 450px; margin: auto;
}
h1, h2 { font-weight: normal; text-align: center;
}
h1 { font-weight: bold; text-transform: uppercase; margin-bottom: 60px;
}
input.center { text-align: center;
}
label.center { width: 600px; text-align: center;
}
h2 { opacity: 0.5; margin-top: -40px;
}
label { cursor: text;
}

Floating labels with CSS only - Script Codes JS Codes

// I'm still improving it!
// Inspiration: http://dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction
Floating labels with CSS only - Script Codes
Floating labels with CSS only - Script Codes
Home Page Home
Developer Diéssica Gurskas
Username diessica
Uploaded January 10, 2023
Rating 4
Size 3,966 Kb
Views 6,072
Do you need developer help for Floating labels with CSS only?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Diéssica Gurskas (diessica) Script Codes
Name
CSS Sine Waves
Equal Height Columns Sass mixin
Colunas de mesma altura
Hover to show the text
CSS Tube explodes
Tooltip with title attribute
CSS is AWESOME
Pure CSS Waves
A CSS curve
How checkbox hack works
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!