Skip to content

Instantly share code, notes, and snippets.

@Ianfeather

Ianfeather/forms.css

Created September 5, 2017 14:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Ianfeather/df5003b84f0946c50010ed8c48e1f99f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Ianfeather/df5003b84f0946c50010ed8c48e1f99f to your computer and use it in GitHub Desktop.
Download ZIP
forms.css
Raw
forms.css
.text-input,
.text-input--small,
.textarea,
.textarea--small,
.select,
.select--small {
font-family: inherit !important;
background: #fff !important;
font-size: 1rem !important;
line-height: 1.5rem !important;
padding: .5rem .75rem !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important; }
.text-input:disabled,
.text-input--small:disabled,
.textarea:disabled,
.textarea--small:disabled,
.select:disabled,
.select--small:disabled {
opacity: 0.3 !important; }
.select {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%20488%20285%27%3E%3Cpath%20d%3D%27M483.11%2029.381l-24.449-24.485c-2.934-2.938-7.335-4.897-11.246-4.897-3.912%200-8.313%201.959-11.246%204.897l-192.168%20192.448-192.168-192.448c-2.934-2.938-7.335-4.897-11.246-4.897-4.401%200-8.313%201.959-11.246%204.897l-24.449%2024.485c-2.934%202.938-4.89%207.345-4.89%2011.263s1.956%208.325%204.89%2011.263l227.864%20228.196c2.934%202.938%207.335%204.897%2011.246%204.897%203.912%200%208.313-1.959%2011.246-4.897l227.864-228.196c2.934-2.938%204.89-7.345%204.89-11.263s-1.956-8.325-4.89-11.263z%27%20fill%3D%27%23000%27/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: calc(100% - 1rem) center !important;
background-size: .6875rem !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
border-radius: 0 !important;
padding-right: 2.5rem !important; }
select::-ms-expand,
.select::-ms-expand {
display: none; }
.select--small,
.text-input--small {
font-size: 0.875rem !important;
line-height: 1.25rem !important;
padding: 0.3125rem .625rem !important; }
.select--small {
padding-right: 2rem !important;
background-position: calc(100% - .875rem) center !important;
background-size: .5rem !important; }
.textarea {
display: block !important;
min-height: 6rem !important;
padding: .5rem .75rem !important; }
.textarea--small {
display: block !important;
min-height: 5rem !important;
padding: .375rem .625rem !important;
font-size: 0.875rem !important;
line-height: 1.25rem !important; }
.radio {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
height: 0px; }
.radio + label {
font-size: 0.875rem !important;
cursor: pointer !important;
line-height: 1.5rem;
display: block; }
.radio + label:before {
content: "" !important;
display: inline-block !important;
width: .75rem !important;
height: .75rem !important;
margin-right: .375rem !important;
position: relative !important;
bottom: -1px !important;
background-color: #fff !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important; }
.radio + label:before {
border-radius: 50% !important; }
.radio:disabled + label {
opacity: 0.3 !important; }
.radio:checked + label:before {
background-color: #fff !important;
border: 4px solid #0f65ef !important; }
.checkbox {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
height: 0px; }
.checkbox + label {
font-size: 0.875rem !important;
cursor: pointer !important;
line-height: 1.5rem;
display: block; }
.checkbox + label:before {
content: "" !important;
display: inline-block !important;
width: .75rem !important;
height: .75rem !important;
margin-right: .375rem !important;
position: relative !important;
bottom: -1px !important;
background-color: #fff !important;
border: 1px solid rgba(0, 0, 0, 0.2) !important; }
.checkbox + label:before {
border-radius: 30% !important; }
.checkbox:disabled + label {
opacity: 0.3 !important; }
.checkbox:checked + label:before {
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2710%27%20height%3D%2710%27%20viewBox%3D%270%200%20512%20512%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M491.185%20120.619l-42.818-42.818c-5.667-5.667-13.538-8.815-21.409-8.815-7.871%200-15.742%203.148-21.409%208.815l-206.534%20206.849-92.563-92.877c-5.667-5.667-13.538-8.815-21.409-8.815-7.871%200-15.742%203.148-21.409%208.815l-42.818%2042.818c-5.667%205.667-8.815%2013.538-8.815%2021.409%200%207.871%203.148%2015.742%208.815%2021.409l113.972%20113.972%2042.818%2042.818c5.667%205.667%2013.538%208.815%2021.409%208.815%207.871%200%2015.742-3.148%2021.409-8.815l42.818-42.818%20227.943-227.943c5.667-5.667%208.815-13.538%208.815-21.409%200-7.871-3.148-15.742-8.815-21.409z%27%20fill%3D%27%23fff%27/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-color: #0f65ef !important;
background-size: .5rem !important;
border-style: none !important; }
.form-label {
display: block;
font-weight: 600 !important;
margin-bottom: 0.5rem !important; }
.form-label--small {
font-size: 0.875rem !important;
margin-bottom: .25rem !important; }
.form-label--optional {
color: #999 !important;
font-weight: 400 !important; }
.form-label--required {
color: #e32 !important;
font-weight: 400 !important; }
.form-helper {
color: #999 !important;
display: block !important;
margin-top: 0.5rem !important;
font-size: 0.875rem !important; }
.form-feedback {
display: block !important;
margin-top: 0.5rem !important;
font-size: 0.875rem !important; }
.form-fieldset--warning .form-feedback,
.form-fieldset--warning .form-label {
color: #f47f16 !important; }
.form-fieldset--warning .text-input,
.form-fieldset--warning .text-input--small,
.form-fieldset--warning .textarea,
.form-fieldset--warning .textarea--small,
.form-fieldset--warning .select,
.form-fieldset--warning .select--small {
border-color: #f47f16 !important; }
.form-fieldset--success .form-feedback,
.form-fieldset--success .form-label {
color: #68af15 !important; }
.form-fieldset--success .form-feedback:before {
content: "" !important;
height: .875rem !important;
width: .875rem !important;
display: inline-block !important;
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2710%27%20height%3D%2710%27%20viewBox%3D%270%200%20512%20512%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M491.185%20120.619l-42.818-42.818c-5.667-5.667-13.538-8.815-21.409-8.815-7.871%200-15.742%203.148-21.409%208.815l-206.534%20206.849-92.563-92.877c-5.667-5.667-13.538-8.815-21.409-8.815-7.871%200-15.742%203.148-21.409%208.815l-42.818%2042.818c-5.667%205.667-8.815%2013.538-8.815%2021.409%200%207.871%203.148%2015.742%208.815%2021.409l113.972%20113.972%2042.818%2042.818c5.667%205.667%2013.538%208.815%2021.409%208.815%207.871%200%2015.742-3.148%2021.409-8.815l42.818-42.818%20227.943-227.943c5.667-5.667%208.815-13.538%208.815-21.409%200-7.871-3.148-15.742-8.815-21.409z%27%20fill%3D%27%23fff%27/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-size: .5rem !important;
background-color: #68af15 !important;
border-radius: 50% !important;
background-position: center !important;
margin-right: .375rem !important;
position: relative !important;
bottom: -2px !important; }
.form-fieldset--success .text-input,
.form-fieldset--success .text-input--small,
.form-fieldset--success .textarea,
.form-fieldset--success .textarea--small,
.form-fieldset--success .select,
.form-fieldset--success .select--small {
border-color: #68af15 !important; }
.form-fieldset--error .form-feedback,
.form-fieldset--error .form-label {
color: #e32 !important; }
.form-fieldset--error .text-input,
.form-fieldset--error .text-input--small,
.form-fieldset--error .textarea,
.form-fieldset--error .textarea--small,
.form-fieldset--error .select,
.form-fieldset--error .select--small {
border-color: #e32 !important; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment