Skip to content

Instantly share code, notes, and snippets.

@lpjwilson
Created May 19, 2017 19:09
Show Gist options
  • Save lpjwilson/3601386732dfa608763bc700abc4d2c9 to your computer and use it in GitHub Desktop.
Save lpjwilson/3601386732dfa608763bc700abc4d2c9 to your computer and use it in GitHub Desktop.
Some custom CSS to style a form to look like a Native LP form
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
width: 100%;
display: inline-block;
height: 38px;
padding: 0 30px;
color: #f2f2f2;
text-align: center;
font-size: 1em;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
/*white-space: nowrap; */
background-color: rgb(250, 199, 60);
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
margin-top: 10px;
transition: color 0.2s linear, background 0.2s linear, border-color 0.2s linear, text-shadow 0.2s linear;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
background-color: rgb(199, 158, 48);
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
color: #FFF;
background-color: #33C3F0;
border-color: #33C3F0;
}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
color: #FFF;
background-color: #1EAEDB;
border-color: #1EAEDB;
}
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
width: 100%;
height: 38px;
padding: 6px 10px;
/* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff;
border: 1px solid #D1D1D1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid #555000;
box-shadow: rgba(76, 81, 93, 1) 0 0 1.5px 1px;
outline: 0;
}
label,
legend {
color: #ffffff;
margin-bottom: .1rem;
margin-top: 10px;
font-weight: 600;
}
fieldset {
padding: 0;
border-width: 0;
}
input[type="checkbox"],
input[type="radio"] {
display: inline;
}
label > .label-body {
display: inline-block;
margin-left: .5rem;
font-weight: normal;
}
/* for IS specific fields */
.infusion-field{
padding-top: 10px;
}
.infusion-submit{
padding-top: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment