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

mediathread

Posted Apr 5 2015 9:53 PDT

$25


  • Assigned To benzhang
  • Solved
  • html5
    css3
  • 507 Views

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

greasan

Posted Apr 5 2015 10:34 PDT

I did this pen really quick: http://codepen.io/m1aw/pen/pvmyyw

I think is something like this you are looking for.

User Gravatar

m1aw

Posted Apr 5 2015 10:36 PDT

Not all browsers support color for placeholders with pseudo elements.

User Gravatar

greasan

Posted Apr 5 2015 10:42 PDT

Here's my pen it's pretty simple: http://codepen.io/Cdjohnson012895/pen/GgaZNg

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

User Gravatar

cjohnson0195

Posted Apr 5 2015 10:53 PDT

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

HunterNL

Posted Apr 5 2015 11:37 PDT

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

Preview

My Implementation

User Gravatar

benzhang

Posted Apr 5 2015 20:04 PDT

Solution

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