Skip to content

Instantly share code, notes, and snippets.

@nrrrdcore

nrrrdcore/inset_input.css

Created August 9, 2012 23:35
Show Gist options
  • Save nrrrdcore/3309046 to your computer and use it in GitHub Desktop.
Save nrrrdcore/3309046 to your computer and use it in GitHub Desktop.
Download ZIP
The Perfect Inset Input CSS
Raw
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
Copy link
Author

No more blurry inputs.

Pretty excellent for boxes/divs too.

@spencereholtaway
Copy link

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

@nrrrdcore
Copy link
Author

Thanks Spencer!

@spencereholtaway
Copy link

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
Copy link

Add outline: 0;

@franklinjavier
Copy link

http://jsfiddle.net/franklinjavier/9Y5wm/

@dustinlarimer
Copy link

very cool, thx @nrrrdcore! 😃

@mhnsn1
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
Copy link

spjpgrd commented Apr 7, 2016

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

@mehulmpt
Copy link

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

@maddemeline
Copy link

This is perfect! Thanks!

@jcppman
Copy link

jcppman commented Jun 28, 2018

perfect border!

@itarin
Copy link

itarin commented Aug 2, 2018

thank you!

@mreed4
Copy link

mreed4 commented Jan 14, 2024 •
edited
Loading

Still using this 10+ years later for absolutely beautiful inputs. Truly timeless!

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