Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The Perfect Inset Input CSS
input {
height: 34px;
width: 100%;
border-radius: 3px;
border: 1px solid transparent;
border-top: none;
border-bottom: 1px solid #DDD;
box-shadow: inset 0 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF;
}
@nrrrdcore

This comment has been minimized.

Copy link
Owner Author

@nrrrdcore nrrrdcore commented Aug 9, 2012

No more blurry inputs.

Pretty excellent for boxes/divs too.

@spencereholtaway

This comment has been minimized.

Copy link

@spencereholtaway spencereholtaway commented Aug 9, 2012

Soft and blurry bad. Crisp and crispier good. 1px highlights/shadows for the absolute win (especially on retina, IMO).
Nice work!

@nrrrdcore

This comment has been minimized.

Copy link
Owner Author

@nrrrdcore nrrrdcore commented Aug 10, 2012

Thanks Spencer!

@spencereholtaway

This comment has been minimized.

Copy link

@spencereholtaway spencereholtaway commented Aug 10, 2012

Most welcome - makes me want to get smart and speedy on CSS myself. So great to see what things will actually look like in-browser for designers.

@franklinjavier

This comment has been minimized.

Copy link

@franklinjavier franklinjavier commented Aug 13, 2012

Add outline: 0;

@franklinjavier

This comment has been minimized.

@dustinlarimer

This comment has been minimized.

Copy link

@dustinlarimer dustinlarimer commented Jan 26, 2015

very cool, thx @nrrrdcore! 😃

@mhnsn1

This comment has been minimized.

Copy link

@mhnsn1 mhnsn1 commented Mar 17, 2015

When I see "perfect" in a title, I immediately move on because nothing is perfect. But this post turns out to be true! I'm glad I stooped by.

@spjpgrd

This comment has been minimized.

Copy link

@spjpgrd spjpgrd commented Apr 7, 2016

Almost 3 years later, and it still doesn't disappoint!

@mehulmpt

This comment has been minimized.

Copy link

@mehulmpt mehulmpt commented Apr 15, 2017

Looks great! But doesn't fit at all with an image in background. :(

@maddemeline

This comment has been minimized.

Copy link

@maddemeline maddemeline commented Mar 28, 2018

This is perfect! Thanks!

@jcppman

This comment has been minimized.

Copy link

@jcppman jcppman commented Jun 28, 2018

perfect border!

@itarin

This comment has been minimized.

Copy link

@itarin itarin commented Aug 2, 2018

thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment