Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Custom CSS for input fields

I looking for someone to help create the css that would generate input fields for text and password like the picture below.

Including the icon to the left and the underline for the input field with transparent background.

The image is a screen capture.. so the background image you see is not important.

enter image description here

User Gravatar


Posted Apr 5 2015 9:53 UTC


  • Assigned To benzhang
  • Solved
  • html5

6 Replies

input {
  background: none;
  border: 0;
  border-bottom: 3px solid #fff;
  padding: 10px;

Some sample code. The icons are missing and the best implementation of font color for placeholders is still disputed.

Where you would like to implement the form?

User Gravatar


Posted Apr 5 2015 10:34 UTC

I did this pen really quick:

I think is something like this you are looking for.

User Gravatar


Posted Apr 5 2015 10:36 UTC

Not all browsers support color for placeholders with pseudo elements.

User Gravatar


Posted Apr 5 2015 10:42 UTC

Here's my pen it's pretty simple:

But you can play with it to get a better idea of what you want!

User Gravatar


Posted Apr 5 2015 10:53 UTC

Here's my JSFiffle. This code requires Font Awesome, which is super easy to install.

I've replaced the ugly blue focus border with a small animation.

Let me know if you want anything changed.

User Gravatar


Posted Apr 5 2015 11:37 UTC

This is my implementation of it. I traced it with vectors and created custom .svg icons. The code is available as a gist and as a preview on CodePen. Enjoy!

What is included:

  • An .html template of the form
  • A complete .scss file as well as the compiled .css
  • 2 hand-traced vector images in .svg format


My Implementation

User Gravatar


Posted Apr 5 2015 20:04 UTC


This didn't solve your task? Get your own custom solution.

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions