Input Textbox with Floating Label

Elevate your form design with stylish input textboxes featuring floating labels. Learn how to create a modern and user-friendly form input layout using HTML and CSS for improved usability.

Preview
Code

<div class="textbox">
  <input
    required
   id="textbox"
    spellcheck="false"
    type="text"
    placeholder="Type a name"
  />
  <label for="textbox">Username</label>
</div>

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #1a1a1a;
  color: #f9f9f9;
}

.textbox {
  position: relative;
}

.textbox label {
  position: absolute;
  display: grid;
  place-items: center;
  transform-origin: 0% 0%;
  pointer-events: none;
  top: 4px;
  left: 4px;
  height: 52px;
  width: 110px;
  border-radius: 27px;
  background: #5071fa;
  transition: 0.3s;
}

.textbox input {
  width: 300px;
  height: 60px;
  border-radius: 30px;
  background: #313136;
  border: 0;
  padding-left: 126px;
  font-size: 16px;
  font-family: inherit;
  color: rgb(255 255 255 / 96%);
  outline: none;
  transition: 0.3s;
}

.textbox input::placeholder {
  color: rgb(255 255 255 / 50%);
}

.textbox :is(input:focus, input:valid) {
  padding-left: 20px;
}

.textbox :is(input:focus, input:valid) ~ label {
  translate: 0 -54px;
  scale: 0.825;
}

```
No need of JavaScript
```

Enhance your website's form elements with a sleek input textbox featuring a floating label. This guide will walk you through creating a customizable input textbox with a floating label using HTML and CSS. Follow these instructions to copy the provided code snippet, link the required CSS files, and personalize the floating label to match your website's design.

Step 1: Copy the Code Snippet

Start by copying the provided HTML and CSS code snippet below. This snippet includes the foundational structure and styles for the input textbox with a floating label. Select the code, copy it, and paste it into your respective HTML and CSS files.

Step 2: Link CSS Files

Ensure the CSS file is correctly linked in your HTML document. Add the following <link> tag within the <head> section to import the CSS styles:
```
<link rel="stylesheet" href="styles.css">
```

Step 3: Customize and Make it Yours

Personalize the input textbox with a floating label to match your website's branding and functionality. Adjust the CSS styles to modify the input box and label's appearance, colors, and interactions. Experiment with different fonts, colors, and sizes to create a unique and engaging form element.

By following these steps, you can implement and customize an input textbox with a floating label on your website using HTML and CSS. Tailor the textbox to your specific needs and enhance your site's forms with this modern and stylish component.

Code Explanation

HTML Code

div with Class textbox

<div class="textbox">

<div class="textbox">: This is a container div element with the class textbox. The class is typically used to style the container and its child elements using CSS.

input Element

<input
  required
  spellcheck="false"
  type="text"
  placeholder="Type a name"
/>

<input>: This is an input element of type text.
required: This attribute makes the input field mandatory. The form cannot be submitted if this field is left empty.
spellcheck="false": This attribute disables the browser's spellcheck for this input field.
type="text": Specifies that the input field is for text input.
placeholder="Type a name": This attribute provides a placeholder text that appears in the input field when it is empty, giving users a hint about what to enter.

label Element

<label for="textbox">Username</label>

<label>: This element provides a label for the input field. The text within the label describes the expected input.
for="textbox": This attribute associates the label with an input element.

CSS Code

Universal Selector

* {
  box-sizing: border-box;
}

*: The universal selector applies styles to all elements.
box-sizing: border-box;: Ensures that padding and borders are included in the element's total width and height, making layout calculations more predictable.

HTML and Body Styling

html,
body {
  height: 100%;
}

html, body: These selectors apply styles to both the html and body elements.
height: 100%;: Sets the height of the html and body elements to 100% of the viewport height.

Body Styling

body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #1a1a1a;
  color: #f9f9f9;
}

margin: 0;: Removes default margin.
display: grid;: Uses CSS Grid Layout.
place-items: center;: Centers content both horizontally and vertically.
background: #1a1a1a;: Sets background color to dark grey.
color: #f9f9f9;: Sets text color to light grey.

Textbox Container Styling

.textbox {
  position: relative;
}

position: relative;: Allows positioning of child elements relative to this container.

Label Styling

.textbox label {
  position: absolute;
  display: grid;
  place-items: center;
  transform-origin: 0% 0%;
  pointer-events: none;
  top: 4px;
  left: 4px;
  height: 52px;
  width: 110px;
  border-radius: 27px;
  background: #5071fa;
  transition: 0.3s;
}

position: absolute;: Positions the label absolutely within the textbox container.
display: grid; and place-items: center;: Centers the label content.
transform-origin: 0% 0%;: Sets the origin for transformations to the top-left corner.
pointer-events: none;: Makes the label non-interactive.
top: 4px; and left: 4px;: Positions the label 4 pixels from the top and left of the textbox container.
height: 52px; and width: 110px;: Sets the label's dimensions.
border-radius: 27px;: Rounds the corners of the label.
background: #5071fa;: Sets the background color to blue.
transition: 0.3s;: Smoothly transitions any changes to the label over 0.3 seconds.

Input Styling

.textbox input {
  width: 300px;
  height: 60px;
  border-radius: 30px;
  background: #313136;
  border: 0;
  padding-left: 126px;
  font-size: 16px;
  font-family: inherit;
  color: rgb(255 255 255 / 96%);
  outline: none;
  transition: 0.3s;
}

width: 300px;: Sets the input field width.
height: 60px;: Sets the input field height.
border-radius: 30px;: Rounds the corners of the input field.
background: #313136;: Sets the background color to dark grey.
border: 0;: Removes the default border.
padding-left: 126px;: Adds padding to the left to make room for the label.
font-size: 16px; and font-family: inherit;: Sets the font size and inherits the font family.
color: rgb(255 255 255 / 96%);: Sets the text color with slight transparency.
outline: none;: Removes the default focus outline.
transition: 0.3s;: Smoothly transitions any changes to the input field over 0.3 seconds.

Placeholder Styling

.textbox input::placeholder {
  color: rgb(255 255 255 / 50%);
}

color: rgb(255 255 255 / 50%);: Sets the placeholder text color with 50% opacity.

Focused and Valid Input Styling

.textbox :is(input:focus, input:valid) {
  padding-left: 20px;
}

:is(input:focus, input:valid): Selects the input field when it is focused or valid.
padding-left: 20px;: Reduces the left padding to 20px when the input is focused or valid.

Label Transition on Focused and Valid Input

.textbox :is(input:focus, input:valid) ~ label {
  translate: 0 -54px;
  scale: 0.825;
}

:is(input:focus, input:valid) ~ label: Selects the label sibling of the input field when the input is focused or valid.
translate: 0 -54px;: Moves the label up by 54 pixels.
scale: 0.825;: Scales down the label to 82.5% of its original size.