/ Uncategorized

Pinterest Style Inputs

If you're asking your self "How does Pinterest.com make inputs look so damn sexy?", I'm going to answer that question.


And simple enough, here's the code. If you want spice it up even more, add an ":active" style which adds a glow around the whole input.

input {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-moz-box-sizing: border-box;
border: 1px solid #A4A2A2;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px rgba(34, 25, 25, 0.15) inset, 0 1px rgba(255, 255, 255, 0.8);
background: none repeat scroll 0 0 #fcf9f9;
color: #8c7e7e;
line-height: 1em;
padding: 5px;
display: inline-block;
font-size: 18px !important;
margin: 0 6px 0 0;


Corey Snyder

Corey Snyder

Senior Front-End Engineer for Aver Inc.. I have independently developed & released multiple video-games. I play Ice Hockey, I race FPV Drones, and I love my Subaru WRX STI.

Read More