/ 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.

Result:

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