Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* Setup a reasonable default font */
body {
font-family: "Roboto", sans-serif
}
/* Style all select, textareas and input types except color, radio, checkbox */
input:not([type=color]):not([type=radio]):not([type=checkbox]),
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #ccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px;
/* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
}
/* Style textarea elements */
textarea {
resize: vertical
/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* increase the size of the select element to match others */
select {
height: 4em;
}
/* add some space between the radio options*/
input[type=radio] {
margin-left: 10px;
margin-right: 5px;
}
/* add some space between the checkbox options*/
input[type=checkbox] {
margin-right: 10px;
}
/* Style the submit button with a specific background color etc */
button[type=submit] {
background-color: #14b2cf;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
/* When moving the mouse over the submit button, add a darker color */
button[type=submit]:hover {
background-color: #1091A9;
}
/* Add a background color and some padding around the form */
.contact-us-container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 50%;
margin: 30px;
}
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.