Underlined form fields

Developer
Mitch Pruitt
Size
2,323 Kb
Views
12,138

How do I make an underlined form fields?

Just working on classing up some form fields, yo.. What is a underlined form fields? How do you make a underlined form fields? This script and codes were developed by Mitch Pruitt on 08 November 2022, Tuesday.

Underlined form fields Previews
IQ Test

Underlined form fields - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Underlined form fields</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="container"> <form> <h1>Underlined form</h1> <div class="form-item"> <label for="name"><span class="entypo-user"></span></label><input name="name" type="text" placeholder="Name" required autofocus></input> </div> <div class="form-item"> <label for="email"><span class="entypo-mail"></span></label><input name="email" type="email" placeholder="Email" required></input> </div> <div class="form-item"> <label for="phone"><span class="entypo-mobile"></span></label><input name="phone" type="tel" placeholder="Phone" required></input> </div> <div class="form-item"> <label for="password"><span class="entypo-lock"></span></label><input name="password" type="password" placeholder="Password" required></input> </div> <div class="form-item"> <label for="password-confirm"><span class="entypo-lock"></span></label><input name="password-confirm" type="password" placeholder="Retype password" required></input> </div> <a href="#"> <div class="button"><p class="btn-title">Aight</p></div> </a> </form> </div>
</body>
</body>
</html>

Underlined form fields - Script Codes CSS Codes

@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { background-color: #ccc; background-image: url(https://subtlepatterns.com/patterns/grid.png); font: 16px "Helvetica Neue"; font-weight: 200; letter-spacing: 1.5px;
}
.container { width: 360px; background-image: url(https://subtlepatterns.com/patterns/lightpaperfibers.png); background-color: #fff; margin: 40px auto auto; padding: 8px 0 20px 0; border-radius: 4px; -webkit-box-shadow: 1px 1px 2px 0px rgba(155, 155, 155, .75); box-shadow: 1px 1px 2px 0px rgba(155, 155, 155, .75);
}
form { width: 80%; margin: auto;
}
.form-item { margin: 18px auto; border-bottom: 1px solid #000; overflow: hidden;
}
label { float: left; width: 20px; margin-right: 10px; text-align: center;
}
input { float: left; width: 89%; padding: 0 0 6px 0; background-color: #fff; color: #000; font: 16px "Helvetica Neue"; font-weight: 200; letter-spacing: 1.5px; outline: none; border: none;
}
input::-webkit-input-placeholder { padding: 0; color: #999999; font-weight: 200;
}
input:-moz-placeholder { color: #cdcdcd; font-weight: 200;
}
input:-ms-input-placeholder { color: #cdcdcd; font-weight: 200;
}
.button { background-color: #fff; color: #000; width: 100%; margin: 30px auto auto; padding: 8px; border: 1px solid #000; border-radius: 4px; -webkit-transition: all 150ms cubic-bezier(0.420, 0.000, 1.000, 1.000); -moz-transition: all 150ms cubic-bezier(0.420, 0.000, 1.000, 1.000); -ms-transition: all 150ms cubic-bezier(0.420, 0.000, 1.000, 1.000); -o-transition: all 150ms cubic-bezier(0.420, 0.000, 1.000, 1.000); transition: all 150ms cubic-bezier(0.420, 0.000, 1.000, 1.000); /* ease-in */
}
.button:hover { background-color: #000; color: #fff;
}
.btn-title { margin: auto; text-align: center; text-transform: uppercase;
}
h1 { font-weight: 300;
}
a { text-decoration: none;
}
Underlined form fields - Script Codes
Underlined form fields - Script Codes
Home Page Home
Developer Mitch Pruitt
Username mitchdot
Uploaded November 08, 2022
Rating 3
Size 2,323 Kb
Views 12,138
Do you need developer help for Underlined form fields?

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!

Mitch Pruitt (mitchdot) Script Codes
Name
Off-screen navigation
Image caption overlay
West Eastern Divan rollover
Threadless-style rollover menu
Sliding image
A Pen by Mitch Pruitt
Sooper cool article header image
Flexbox-based responsive menu
The Iron Triangle
Flexbox quote box
Create amazing marketing copy 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!