Skip to content

Instantly share code, notes, and snippets.

@stephen-james
Created January 22, 2013 10:58
Show Gist options
  • Save stephen-james/4593799 to your computer and use it in GitHub Desktop.
Save stephen-james/4593799 to your computer and use it in GitHub Desktop.
10gen education login screen input height fix
textarea, input[type="text"], input[type="email"], input[type="password"] {
background: #fafafa;
border: 1px solid #c8c8c8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 300 1rem/1.6rem "PT Sans", Verdana, Geneva, sans-serif;
height: 35px !important;
padding: 5px 12px;
vertical-align: top;
-webkit-font-smoothing: antialiased;
}
@stephen-james
Copy link
Author

Problem with login input height on Chrome Version 24.0.1312.52 m

Problem encountered in Chrome Version 24.0.1312.52 m

Seems that CSS rule input[type="email"] is getting overridden incorrectly by .modal .inner-wrapper .form input[type="email"] rule

25px height is being applied, not 35px height

(See how height 25px is being applied, height 35.px is overridden)

You can get around this with using !important, as per the CSS gist above, see result below...

A possible solution

@vnayar
Copy link

vnayar commented Jan 23, 2013

Good catch! I'm applying the fix right now.

@stephen-james
Copy link
Author

great! thanks for an awesome site!

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