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 commented Aug 9, 2012

No more blurry inputs.

Pretty excellent for boxes/divs too.

@spencereholtaway

This comment has been minimized.

Copy link

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 commented Aug 10, 2012

Thanks Spencer!

@spencereholtaway

This comment has been minimized.

Copy link

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 commented Aug 13, 2012

Add outline: 0;

@franklinjavier

This comment has been minimized.

@dustinlarimer

This comment has been minimized.

Copy link

dustinlarimer commented Jan 26, 2015

very cool, thx @nrrrdcore! 😃

@mhnsn1

This comment has been minimized.

Copy link

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 commented Apr 7, 2016

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

@mehulmpt

This comment has been minimized.

Copy link

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 commented Mar 28, 2018

This is perfect! Thanks!

@jcppman

This comment has been minimized.

Copy link

jcppman commented Jun 28, 2018

perfect border!

@itarin

This comment has been minimized.

Copy link

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
You can’t perform that action at this time.