In this tutorial, we’ll explore how to create custom HTML input styles using HTML and CSS, specifically by applying the perspective CSS property. Input fields are an essential element of any web form. By default, HTML input elements come with a plain style that can look boring and unattractive. However, with a bit of CSS, you can create custom input styles that make your web form look more appealing and engaging.
Preview (Custom HTML Input Style)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost&display=swap" rel="stylesheet">
</head>
<body>
<!-- Custom HTML Input Style -->
<form class="form_container">
<div class="input_container">
<input type="text" id="name" oninput="handleInput(this)" autocomplete="off" spellcheck="false" />
<label for="name">Name</label>
</div>
</form>
<script src="main.js"></script>
</body>
</html>To create our input field with a floating label, we’ll start with a basic HTML form structure. Our form will have a container with a class of form_container and an input container with a class of input_container. Inside the input container, we’ll add an input field with an id of “name” and a label element with a “for” attribute that matches the input field’s id.
CSS
Firstly, we need to reset the default styling of HTML elements. We can do this by adding the following code to our CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Next, we set the background color, font family, and height of the body element. We also use flexbox to align the content to the center of the screen.
body {
background: #e6e7e9;
color: rgb(34, 35, 41);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Jost', sans-serif;
}
For the input container, we use flexbox to create a column layout with a gap of 1.5rem between each element.
.form_container {
display: flex;
flex-direction: column;
gap: 1.5rem;
}To create the custom input style, we start by creating an input container with a label element. We use flexbox to create a column layout for the label and input elements.
.input_container {
display: flex;
flex-direction: column;
}For the input element, we set the padding, width, background color, border, outline, font family, and text color. We also set the position to relative and the background to transparent. We use the -webkit-appearance and appearance properties to remove the default styling of the input element.
input {
padding: 16px 20px;
width: 360px;
background: #2b353e;
border: none;
outline: none;
font-family: 'Hammersmith One', sans-serif;
color: #FFF;
position: relative;
background: transparent;
-webkit-appearance: none;
appearance: none;
}For the label element, we set the position to relative and add a margin-top of 8px. We also add a pseudo-element, ::before, to create a background for the label. We set the content to an empty string, set the position to absolute, and set the top to -55px to move the background above the input element. We set the width to 100% and the height to 47px, with a background color of #2b353e. We use the z-index property to move the background behind the input element. We also use the transform property to rotate the background 90 degrees on the X-axis and set the transform-origin property to 50% 100%. We use the transition property to animate the rotation.
label {
position: relative;
margin-top: 8px;
}
label::before {
content: '';
position: absolute;
width: 100%;
height: 47px;
top: -55px;
background: #2b353e;
z-index: -1;
transform-origin: 50% 100%;
transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);
transition: 0.3s;
}
/* Custom HTML Input Style */JavaScript
function handleInput (e) {
if(e.value.length >= 1) {
e.parentElement.classList.add("hasInput");
} else {
e.parentElement.classList.remove("hasInput");
}
}Give us a Star on our Github repository. Here is the link.
Check out our other blogs 👇
