Skip to content

Instantly share code, notes, and snippets.

@ctkjose

ctkjose/styling_forms.md

Last active October 14, 2017 19:51
Show Gist options
  • Save ctkjose/f7b0db3dd1a40a280c3b704f6efadad5 to your computer and use it in GitHub Desktop.
Save ctkjose/f7b0db3dd1a40a280c3b704f6efadad5 to your computer and use it in GitHub Desktop.
Download ZIP
Styling Forms
Raw
styling_forms.md

Styling Forms

Shadow/Glow

.style-1 input[type="text"] {
  padding: 10px;
  border: solid 1px #dcdcdc;
  transition: box-shadow 0.3s, border 0.3s;
}
.style-1 input[type="text"]:focus,
.style-1 input[type="text"].focus {
  border: solid 1px #707070;
  box-shadow: 0 0 5px 1px #969696;
}

Underline

.style-4 input[type="text"] {
  padding: 10px;
  border: none;
  border-bottom: solid 2px #c9c9c9;
  transition: border 0.3s;
}
.style-4 input[type="text"]:focus,
.style-4 input[type="text"].focus {
  border-bottom: solid 2px #969696;
}

Inset

.style-5 input[type="text"] {
  padding: 10px;
  border: solid 1px #fff;
  box-shadow: inset 1px 1px 2px 0 #707070;
  transition: box-shadow 0.3s;
}
.style-5 input[type="text"]:focus,
.style-5 input[type="text"].focus {
  box-shadow: inset 1px 1px 2px 0 #c9c9c9;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment