Underlined form fields

Developer
Mitch Pruitt
Size
2,323 Kb
Views
12,144
  1. Underlined form fields Previews
  2. Underlined form fields HTML Codes
  3. Underlined form fields CSS Codes

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,144
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
Sliding image
The Iron Triangle
Animated camera focus ring
Threadless-style rollover menu
Image header overlay
Simple responsive drop-down menu
Snazzy fixed backgrounds
Zoomy image rollover
Sooper cool article header image
Sample project gallery
Create amazing blog posts 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!