├── .gitignore ├── bower.json ├── LICENSE.md ├── README.md ├── formhack.sass ├── formhack.scss └── formhack.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | gulpfile.js 3 | package.json 4 | example -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "formhack", 3 | "description": "FormHack is a hackable SASS-based form reset. In addition to being a css reset for form elements, it provides a few variables that allow you to easily change some common attributes.", 4 | "main": [ 5 | "formhack.sass", 6 | "formhack.scss", 7 | "formhack.css" 8 | ], 9 | "keywords": [ 10 | "sass", 11 | "css", 12 | "reset", 13 | "form" 14 | ], 15 | "authors": [ 16 | "Ire Aderinokun (http://ireaderinokun.com)" 17 | ], 18 | "license": "MIT", 19 | "repository": { 20 | "type": "git", 21 | "url": "git://github.com/ireade/formhack.git" 22 | }, 23 | "ignore": [ 24 | "example", 25 | "gulpfile.js", 26 | "package.json", 27 | "node_modules" 28 | ] 29 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Ire Aderinokun 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # FormHack 2 | 3 | FormHack is a hackable [SASS](http://sass-lang.com)-based css form reset. Although there are standard css resets for forms out there, I wanted to create one that I could easily customize for any site, without having to worry about cross-browser compatibility and differences. 4 | 5 | FormHack works by providing a few variables that allow you to change some common attributes such as border-radius, input height/width, and colours. By changing these attributes, you will get a beautiful form that is consistent across all major browsers. I have also organised the code in a way that is (hopefully) easy for you to edit if you want to alter more than the given settings. 6 | 7 | If you have any questions or suggestions for how I can make this better, tweet me at [@ireaderinokun](https://twitter.com/ireaderinokun). 8 | 9 | 10 | ## Getting Started 11 | 12 | You can use any of the following methods to start using Formhack - 13 | 14 | Install with [Bower](http://bower.io/) 15 | 16 | ``` 17 | bower install formhack 18 | ``` 19 | 20 | Clone this repository 21 | 22 | ``` 23 | git clone https://github.com/ireade/formhack.git 24 | ``` 25 | 26 | 27 | ## Config 28 | 29 | This is the default config and the variables you can change - 30 | 31 | ``` 32 | // Font 33 | $fh-font-family: 'Raleway', sans-serif; 34 | $fh-font-size: 16px; 35 | $fh-font-color: rgb(40, 40, 40); 36 | 37 | // Borders 38 | $fh-border-radius: 5px; 39 | $fh-border-width: 1px; 40 | $fh-border-style: solid; 41 | $fh-border-color: rgb(200, 200, 200); 42 | 43 | // Inputs, Textareas, Select, Option 44 | $fh-input-height: 40px; 45 | $fh-input-width: 100%; 46 | $fh-input-max-width: 400px; 47 | $fh-input-bg-color: #fff; 48 | $fh-focus-bg-color: rgb(220, 220, 220); 49 | $fh-focus-border-color: $fh-border-color; 50 | $fh-focus-font-color: $fh-font-color; 51 | 52 | // Select Vendor Styling 53 | $fh-allow-vendor-styling: true; 54 | 55 | // Fieldset & Legend Styling 56 | $fh-fieldset-bare: false; 57 | 58 | // Buttons & Input Submits 59 | $fh-button-height: 40px; 60 | $fh-button-width: 100%; 61 | $fh-button-max-width: 200px; 62 | $fh-button-font-color: $fh-font-color; 63 | $fh-button-bg-color: $fh-focus-bg-color; 64 | $fh-button-hover-bg-color: $fh-border-color; 65 | $fh-button-hover-font-color: $fh-font-color; 66 | 67 | // Layout 68 | $fh-centered: false; 69 | $fh-display: block; 70 | ``` 71 | 72 | ### Variables 73 | 74 | Here is an explanation of what some of the variables control. 75 | 76 | Variable | Description 77 | ---------|------------- 78 | `$fh-allow-vendor-styling` | Boolean. Specifies whether you want the `select` element to have the different browser styling 79 | `$fh-fieldset-bare` | Boolean. Specifies whether you want the `fieldset` element to be styled or bare. 80 | `$fh-centered` | Boolean. Specifies whether the elements should be centered 81 | `$fh-display` | String. Specifies what value you want the `display` css property to be set to 82 | 83 | 84 | -------------------------------------------------------------------------------- /formhack.sass: -------------------------------------------------------------------------------- 1 | /* FormHack v1.2.0 (formhack.io) */ 2 | 3 | // Config ----------------------------- 4 | 5 | // Font 6 | $fh-font-family: 'Raleway', sans-serif !default 7 | $fh-font-size: 16px !default 8 | $fh-font-color: rgb(40, 40, 40) !default 9 | 10 | // Borders 11 | $fh-border-radius: 5px !default 12 | $fh-border-width: 1px !default 13 | $fh-border-style: solid !default 14 | $fh-border-color: rgb(200, 200, 200) !default 15 | 16 | // Inputs, Textareas, Select, Option 17 | $fh-input-height: 40px !default 18 | $fh-input-width: 100% !default 19 | $fh-input-max-width: 400px !default 20 | $fh-input-bg-color: #fff !default 21 | $fh-focus-bg-color: rgb(220, 220, 220) !default 22 | $fh-focus-border-color: $fh-border-color !default 23 | $fh-focus-font-color: $fh-font-color !default 24 | 25 | // Select Vendor Styling 26 | $fh-allow-select-vendor-styling: true !default 27 | 28 | // Fieldset & Legend Styling 29 | $fh-fieldset-bare: false !default 30 | 31 | // Buttons & Input Submits 32 | $fh-button-height: 40px !default 33 | $fh-button-width: 100% !default 34 | $fh-button-max-width: 200px !default 35 | $fh-button-font-color: $fh-font-color !default 36 | $fh-button-bg-color: $fh-focus-bg-color !default 37 | $fh-button-hover-bg-color: $fh-border-color !default 38 | $fh-button-hover-font-color: $fh-font-color !default 39 | 40 | // Layout 41 | $fh-centered: false !default 42 | $fh-display: block !default 43 | 44 | 45 | // Center/Left-Aligned Layout 46 | =center-layout 47 | @if $fh-centered == true 48 | margin: 10px auto 49 | text-align: center 50 | @else 51 | margin: 10px 0 52 | 53 | 54 | /* Global Reset Styles ------------------ */ 55 | 56 | input, 57 | textarea, 58 | select, 59 | option, 60 | optgroup, 61 | button, 62 | legend, 63 | fieldset 64 | box-sizing: border-box 65 | font-family: $fh-font-family 66 | font-size: $fh-font-size 67 | color: $fh-font-color 68 | vertical-align: top 69 | outline: none 70 | 71 | display: $fh-display 72 | +center-layout 73 | 74 | datalist 75 | font-family: $fh-font-family 76 | font-size: $fh-font-size 77 | 78 | label 79 | display: $fh-display 80 | +center-layout 81 | 82 | 83 | /* Input & Textarea ------------------ */ 84 | 85 | /* Fields with standard width */ 86 | input[type="text"], 87 | input[type="email"], 88 | input[type="password"], 89 | input[type="search"], 90 | input[type="color"], 91 | input[type="date"], 92 | input[type="datetime-local"], 93 | input[type="month"], 94 | input[type="number"], 95 | input[type="tel"], 96 | input[type="time"], 97 | input[type="url"], 98 | input[type="week"], 99 | input[list], 100 | input[type="file"], 101 | select, 102 | textarea 103 | width: $fh-input-width 104 | max-width: $fh-input-max-width 105 | padding: $fh-input-height / 5 106 | background-color: $fh-input-bg-color 107 | 108 | border-radius: $fh-border-radius 109 | border: $fh-border-width $fh-border-style $fh-border-color 110 | 111 | 112 | /* Fields with standard height */ 113 | input[type="text"], 114 | input[type="email"], 115 | input[type="password"], 116 | input[type="search"], 117 | input[type="color"], 118 | input[type="date"], 119 | input[type="datetime-local"], 120 | input[type="month"], 121 | input[type="number"], 122 | input[type="tel"], 123 | input[type="time"], 124 | input[type="url"], 125 | input[type="week"], 126 | input[list] 127 | height: $fh-input-height 128 | -webkit-appearance: none 129 | 130 | 131 | /* Other */ 132 | 133 | textarea 134 | -webkit-appearance: none 135 | overflow: auto 136 | 137 | 138 | input[type="range"] 139 | height: $fh-input-height 140 | width: $fh-input-width 141 | max-width: $fh-input-max-width 142 | 143 | 144 | input[type="file"] 145 | min-height: $fh-input-height 146 | 147 | 148 | input[type="search"] 149 | height: $fh-input-height 150 | -webkit-appearance: none 151 | 152 | input[type="search"]::-webkit-search-cancel-button, 153 | input[type="search"]::-webkit-search-decoration 154 | -webkit-appearance: none 155 | 156 | input[type="checkbox"], 157 | input[type="radio"] 158 | display: inline-block 159 | vertical-align: middle 160 | 161 | // For checkbox and radio to be centered, need to wrap the input and label in a span - 162 | // .checkbox-container 163 | // display: block 164 | // text-align: center 165 | // 166 | 167 | 168 | /* Select ------------------ */ 169 | 170 | select 171 | height: $fh-input-height 172 | 173 | @if $fh-allow-select-vendor-styling == false 174 | -webkit-appearance: none 175 | -moz-appearance: none 176 | -ms-appearance: none 177 | -o-appearance: none 178 | 179 | ::-ms-expand 180 | display: none 181 | 182 | select[multiple] 183 | height: auto 184 | min-height: $fh-input-height 185 | padding: 0 186 | 187 | option 188 | margin: 0 189 | padding: $fh-input-height / 5 190 | 191 | 192 | 193 | 194 | /* Fieldset ------------------ */ 195 | 196 | fieldset 197 | @if $fh-fieldset-bare == true 198 | padding: 0 199 | border: 0 200 | 201 | @else 202 | padding: 10px 25px 203 | border-radius: $fh-border-radius 204 | border: $fh-border-width $fh-border-style $fh-border-color 205 | 206 | 207 | 208 | legend 209 | @if $fh-fieldset-bare == true 210 | padding: 0 211 | font-weight: inherit 212 | 213 | @else 214 | padding: 0 5px 215 | font-weight: 700 216 | 217 | 218 | /* Buttons, Input Type Submit/Reset ------------------ */ 219 | 220 | button, 221 | input[type="button"], 222 | input[type="submit"], 223 | input[type="reset"], 224 | input[type="image"] 225 | height: $fh-button-height 226 | width: $fh-button-width 227 | max-width: $fh-button-max-width 228 | background-color: $fh-button-bg-color 229 | cursor: pointer 230 | padding: $fh-input-height / 5 231 | 232 | color: $fh-button-font-color 233 | font-weight: 700 234 | 235 | -webkit-appearance: none 236 | -moz-appearance: none 237 | 238 | border-radius: $fh-border-radius 239 | border: $fh-border-width $fh-border-style $fh-border-color 240 | 241 | 242 | input[type="image"] 243 | text-align: center 244 | padding: $fh-input-height / 5 245 | 246 | 247 | 248 | /* States ------------------ */ 249 | 250 | input[disabled], 251 | textarea[disabled], 252 | select[disabled], 253 | option[disabled], 254 | button[disabled] 255 | cursor: not-allowed 256 | 257 | input:focus, 258 | textarea:focus, 259 | select:focus, 260 | option:focus, 261 | button:focus 262 | background-color: $fh-focus-bg-color 263 | border-color: $fh-focus-border-color 264 | 265 | input[type="checkbox"]:focus, 266 | input[type="radio"]:focus 267 | outline: $fh-focus-border-color solid 2px 268 | 269 | button:hover, 270 | input[type="button"]:hover, 271 | input[type="submit"]:hover, 272 | input[type="reset"]:hover, 273 | button:focus, 274 | input[type="button"]:focus, 275 | input[type="submit"]:focus, 276 | input[type="reset"]:focus 277 | background-color: $fh-button-hover-bg-color 278 | color: $fh-button-hover-font-color 279 | -------------------------------------------------------------------------------- /formhack.scss: -------------------------------------------------------------------------------- 1 | /* FormHack v1.2.0 (formhack.io) */ 2 | 3 | // Config ----------------------------- 4 | 5 | // Font 6 | $fh-font-family: 'Raleway', sans-serif !default; 7 | $fh-font-size: 16px !default; 8 | $fh-font-color: rgb(40, 40, 40) !default; 9 | 10 | // Borders 11 | $fh-border-radius: 5px !default; 12 | $fh-border-width: 1px !default; 13 | $fh-border-style: solid !default; 14 | $fh-border-color: rgb(200, 200, 200) !default; 15 | 16 | // Inputs, Textareas, Select, Option 17 | $fh-input-height: 40px !default; 18 | $fh-input-width: 100% !default; 19 | $fh-input-max-width: 400px !default; 20 | $fh-input-bg-color: #fff !default; 21 | $fh-focus-bg-color: rgb(220, 220, 220) !default; 22 | $fh-focus-border-color: $fh-border-color !default; 23 | $fh-focus-font-color: $fh-font-color !default; 24 | 25 | // Select Vendor Styling 26 | $fh-allow-select-vendor-styling: true !default; 27 | 28 | // Fieldset & Legend Styling 29 | $fh-fieldset-bare: false !default; 30 | 31 | // Buttons & Input Submits 32 | $fh-button-height: 40px !default; 33 | $fh-button-width: 100% !default; 34 | $fh-button-max-width: 200px !default; 35 | $fh-button-font-color: $fh-font-color !default; 36 | $fh-button-bg-color: $fh-focus-bg-color !default; 37 | $fh-button-hover-bg-color: $fh-border-color !default; 38 | $fh-button-hover-font-color: $fh-font-color !default; 39 | 40 | // Layout 41 | $fh-centered: false !default; 42 | $fh-display: block !default; 43 | 44 | 45 | // Center/Left-Aligned Layout 46 | @mixin center-layout { 47 | @if $fh-centered == true { 48 | margin: 10px auto; 49 | text-align: center; 50 | } 51 | @else { 52 | margin: 10px 0; 53 | } 54 | } 55 | 56 | /* Global Reset Styles ------------------ */ 57 | 58 | input, 59 | textarea, 60 | select, 61 | option, 62 | optgroup, 63 | button, 64 | legend, 65 | fieldset { 66 | box-sizing: border-box; 67 | outline: none; 68 | 69 | font-family: $fh-font-family; 70 | font-size: $fh-font-size; 71 | color: $fh-font-color; 72 | vertical-align: top; 73 | 74 | display: $fh-display; 75 | @include center-layout; 76 | } 77 | 78 | 79 | datalist { 80 | font-family: $fh-font-family; 81 | font-size: $fh-font-size; 82 | } 83 | 84 | label { 85 | display: $fh-display; 86 | @include center-layout; 87 | } 88 | 89 | 90 | 91 | /* Input & Textarea ------------------ */ 92 | 93 | /* Fields with standard width */ 94 | input[type="text"], 95 | input[type="email"], 96 | input[type="password"], 97 | input[type="search"], 98 | input[type="color"], 99 | input[type="date"], 100 | input[type="datetime-local"], 101 | input[type="month"], 102 | input[type="number"], 103 | input[type="tel"], 104 | input[type="time"], 105 | input[type="url"], 106 | input[type="week"], 107 | input[list], 108 | input[type="file"], 109 | select, 110 | textarea { 111 | width: $fh-input-width; 112 | max-width: $fh-input-max-width; 113 | padding: $fh-input-height / 5; 114 | background-color: $fh-input-bg-color; 115 | 116 | border-radius: $fh-border-radius; 117 | border: $fh-border-width $fh-border-style $fh-border-color; 118 | } 119 | 120 | /* Fields with standard height */ 121 | input[type="text"], 122 | input[type="email"], 123 | input[type="password"], 124 | input[type="search"], 125 | input[type="color"], 126 | input[type="date"], 127 | input[type="datetime-local"], 128 | input[type="month"], 129 | input[type="number"], 130 | input[type="tel"], 131 | input[type="time"], 132 | input[type="url"], 133 | input[type="week"], 134 | input[list] { 135 | height: $fh-input-height; 136 | -webkit-appearance: none; 137 | } 138 | 139 | /* Other */ 140 | 141 | textarea { 142 | -webkit-appearance: none; 143 | overflow: auto; 144 | } 145 | 146 | input[type="range"] { 147 | height: $fh-input-height; 148 | width: $fh-input-width; 149 | max-width: $fh-input-max-width; 150 | } 151 | 152 | input[type="file"] { 153 | min-height: $fh-input-height; 154 | } 155 | 156 | input[type="search"] { 157 | height: $fh-input-height; 158 | -webkit-appearance: none; 159 | } 160 | input[type="search"]::-webkit-search-cancel-button, 161 | input[type="search"]::-webkit-search-decoration { 162 | -webkit-appearance: none; 163 | } 164 | 165 | input[type="checkbox"], 166 | input[type="radio"] { 167 | display: inline-block; 168 | vertical-align: middle; 169 | } 170 | // For checkbox and radio to be centered, need to wrap the input and label in a span - 171 | // .checkbox-container { 172 | // display: block; 173 | // text-align: center; 174 | // } 175 | 176 | 177 | /* Select ------------------ */ 178 | 179 | select { 180 | height: $fh-input-height; 181 | 182 | @if $fh-allow-select-vendor-styling == false { 183 | -webkit-appearance: none; 184 | -moz-appearance: none; 185 | -ms-appearance: none; 186 | -o-appearance: none; 187 | &::-ms-expand { 188 | display: none; 189 | } 190 | } 191 | } 192 | 193 | select[multiple] { 194 | height: auto; 195 | min-height: $fh-input-height; 196 | padding: 0; 197 | 198 | option { 199 | margin: 0; 200 | padding: $fh-input-height / 5; 201 | } 202 | } 203 | 204 | /* Fieldset ------------------ */ 205 | 206 | fieldset { 207 | @if $fh-fieldset-bare == true { 208 | padding: 0; 209 | border: 0; 210 | } 211 | @else { 212 | padding: 10px 25px; 213 | border-radius: $fh-border-radius; 214 | border: $fh-border-width $fh-border-style $fh-border-color; 215 | } 216 | } 217 | 218 | legend { 219 | @if $fh-fieldset-bare == true { 220 | padding: 0; 221 | font-weight: inherit; 222 | } 223 | @else { 224 | padding: 0 5px; 225 | font-weight: 700; 226 | } 227 | } 228 | 229 | /* Buttons, Input Type Submit/Reset ------------------ */ 230 | 231 | button, 232 | input[type="button"], 233 | input[type="submit"], 234 | input[type="reset"], 235 | input[type="image"] { 236 | height: $fh-button-height; 237 | width: $fh-button-width; 238 | max-width: $fh-button-max-width; 239 | background-color: $fh-button-bg-color; 240 | padding: $fh-input-height / 5; 241 | cursor: pointer; 242 | 243 | color: $fh-button-font-color; 244 | font-weight: 700; 245 | 246 | -webkit-appearance: none; 247 | -moz-appearance: none; 248 | 249 | border-radius: $fh-border-radius; 250 | border: $fh-border-width $fh-border-style $fh-border-color; 251 | } 252 | 253 | input[type="image"] { 254 | text-align: center; 255 | padding: $fh-input-height / 5; 256 | } 257 | 258 | /* States ------------------ */ 259 | 260 | input[disabled], 261 | textarea[disabled], 262 | select[disabled], 263 | option[disabled], 264 | button[disabled] { 265 | cursor: not-allowed; 266 | } 267 | 268 | input:focus, 269 | textarea:focus, 270 | select:focus, 271 | option:focus, 272 | button:focus { 273 | background-color: $fh-focus-bg-color; 274 | border-color: $fh-focus-border-color; 275 | } 276 | 277 | input[type="checkbox"]:focus, 278 | input[type="radio"]:focus { 279 | outline: $fh-focus-border-color solid 2px; 280 | } 281 | 282 | button:hover, 283 | input[type="button"]:hover, 284 | input[type="submit"]:hover, 285 | input[type="reset"]:hover, 286 | button:focus, 287 | input[type="button"]:focus, 288 | input[type="submit"]:focus, 289 | input[type="reset"]:focus { 290 | background-color: $fh-button-hover-bg-color; 291 | color: $fh-button-hover-font-color; 292 | } 293 | -------------------------------------------------------------------------------- /formhack.css: -------------------------------------------------------------------------------- 1 | /* FormHack v1.2.0 (formhack.io) */ 2 | 3 | /* Config ----------------------------- */ 4 | :root { 5 | 6 | /* Font */ 7 | --fh-font-family: 'Raleway', sans-serif; 8 | --fh-font-size: 16px; 9 | --fh-font-color: rgb(40, 40, 40); 10 | 11 | /* Borders */ 12 | --fh-border-radius: 5px; 13 | --fh-border-width: 1px; 14 | --fh-border-style: solid; 15 | --fh-border-color: rgb(200, 200, 200); 16 | 17 | /* Inputs, Textareas, Select, Option */ 18 | --fh-input-height: 40px; 19 | --fh-input-width: 100%; 20 | --fh-input-max-width: 400px; 21 | --fh-input-bg-color: #fff; 22 | --fh-focus-bg-color: rgb(220, 220, 220); 23 | --fh-focus-border-color: var(--fh-border-color); 24 | --fh-focus-font-color: var(--fh-font-color); 25 | 26 | /* Select Vendor Styling */ 27 | --fh-select-vendor-styling: none; /* comment this out to maintain vendor styling */ 28 | 29 | 30 | /* Buttons & Input Submits */ 31 | --fh-button-height: 40px; 32 | --fh-button-width: 100%; 33 | --fh-button-max-width: 200px; 34 | --fh-button-font-color: var(--fh-font-color); 35 | --fh-button-bg-color: var(--fh-focus-bg-color); 36 | --fh-button-hover-bg-color: var(--fh-border-color); 37 | --fh-button-hover-font-color: var(--fh-font-color); 38 | 39 | /* Layout */ 40 | --fh-layout-display: block; 41 | --fh-layout-margin: 10px 0; /* change to "10px auto" to center */ 42 | --fh-layout-text-align: left; 43 | } 44 | 45 | 46 | 47 | /* Global Reset Styles ------------------ */ 48 | 49 | input, 50 | textarea, 51 | select, 52 | option, 53 | optgroup, 54 | button, 55 | legend, 56 | fieldset { 57 | box-sizing: border-box; 58 | outline: none; 59 | 60 | font-family: var(--fh-font-family); 61 | font-size: var(--fh-font-size); 62 | color: var(--fh-font-color); 63 | vertical-align: top; 64 | 65 | display: var(--fh-layout-display); 66 | margin: var(--fh-layout-margin); 67 | text-align: var(--fh-layout-text-align); 68 | } 69 | 70 | 71 | datalist { 72 | font-family: var(--fh-font-family); 73 | font-size: var(--fh-font-size); 74 | } 75 | 76 | label { 77 | display: var(--fh-layout-display); 78 | margin: var(--fh-layout-margin); 79 | text-align: var(--fh-layout-text-align); 80 | } 81 | 82 | 83 | 84 | /* Input & Textarea ------------------ */ 85 | 86 | /* Fields with standard width */ 87 | input[type="text"], 88 | input[type="email"], 89 | input[type="password"], 90 | input[type="search"], 91 | input[type="color"], 92 | input[type="date"], 93 | input[type="datetime-local"], 94 | input[type="month"], 95 | input[type="number"], 96 | input[type="tel"], 97 | input[type="time"], 98 | input[type="url"], 99 | input[type="week"], 100 | input[list], 101 | input[type="file"], 102 | select, 103 | textarea { 104 | width: var(--fh-input-width); 105 | max-width: var(--fh-input-max-width); 106 | padding: calc( var(--fh-input-height) / 5 ); 107 | background-color: var(--fh-input-bg-color); 108 | 109 | border-radius: var(--fh-border-radius); 110 | border-width: var(--fh-border-width); 111 | border-style: var(--fh-border-style); 112 | border-color: var(--fh-border-color); 113 | } 114 | 115 | /* Fields with standard height */ 116 | input[type="text"], 117 | input[type="email"], 118 | input[type="password"], 119 | input[type="search"], 120 | input[type="color"], 121 | input[type="date"], 122 | input[type="datetime-local"], 123 | input[type="month"], 124 | input[type="number"], 125 | input[type="tel"], 126 | input[type="time"], 127 | input[type="url"], 128 | input[type="week"], 129 | input[list] { 130 | height: var(--fh-input-height); 131 | -webkit-appearance: none; 132 | } 133 | 134 | /* Other */ 135 | 136 | textarea { 137 | -webkit-appearance: none; 138 | overflow: auto; 139 | } 140 | 141 | input[type="range"] { 142 | height: var(--fh-input-height); 143 | width: var(--fh-input-width); 144 | max-width: var(--fh-input-max-width); 145 | } 146 | 147 | input[type="file"] { 148 | min-height: var(--fh-input-height); 149 | } 150 | 151 | input[type="search"] { 152 | height: var(--fh-input-height); 153 | -webkit-appearance: none; 154 | } 155 | input[type="search"]::-webkit-search-cancel-button, 156 | input[type="search"]::-webkit-search-decoration { 157 | -webkit-appearance: none; 158 | } 159 | 160 | input[type="checkbox"], 161 | input[type="radio"] { 162 | display: inline-block; 163 | vertical-align: middle; 164 | } 165 | /* For checkbox and radio to be centered, need to wrap the input and label in a span - 166 | /* .checkbox-container { 167 | /* display: block; 168 | /* text-align: center; 169 | /* } 170 | 171 | 172 | /* Select ------------------ */ 173 | 174 | select { 175 | height: var(--fh-input-height); 176 | 177 | -webkit-appearance: var(--fh-select-vendor-styling, menulist); 178 | -moz-appearance: var(--fh-select-vendor-styling, menulist); 179 | -ms-appearance: var(--fh-select-vendor-styling, menulist); 180 | -o-appearance: var(--fh-select-vendor-styling, menulist); 181 | 182 | 183 | } 184 | 185 | select::-ms-expand{ 186 | display: none; 187 | } 188 | 189 | select[multiple] { 190 | height: auto; 191 | min-height: var(--fh-input-height); 192 | padding: 0; 193 | } 194 | 195 | select[multiple] option { 196 | margin: 0; 197 | padding: calc( var(--fh-input-height) / 5 ); 198 | } 199 | 200 | /* Fieldset ------------------ */ 201 | 202 | fieldset { 203 | padding: 0; 204 | border: 0; 205 | } 206 | 207 | legend { 208 | padding: 0; 209 | font-weight: inherit; 210 | } 211 | 212 | /* Buttons, Input Type Submit/Reset ------------------ */ 213 | 214 | button, 215 | input[type="button"], 216 | input[type="submit"], 217 | input[type="reset"], 218 | input[type="image"] { 219 | height: var(--fh-button-height); 220 | width: var(--fh-button-width); 221 | max-width: var(--fh-button-max-width); 222 | background-color: var(--fh-button-bg-color); 223 | padding: calc( var(--fh-input-height) / 5 ); 224 | cursor: pointer; 225 | 226 | color: var(--fh-button-font-color); 227 | font-weight: 700; 228 | 229 | -webkit-appearance: none; 230 | -moz-appearance: none; 231 | 232 | border-radius: var(--fh-border-radius); 233 | border-width: var(--fh-border-width); 234 | border-style: var(--fh-border-style); 235 | border-color: var(--fh-border-color); 236 | } 237 | 238 | input[type="image"] { 239 | text-align: center; 240 | padding: calc( var(--fh-input-height) / 5 ); 241 | } 242 | 243 | /* States ------------------ */ 244 | 245 | input[disabled], 246 | textarea[disabled], 247 | select[disabled], 248 | option[disabled], 249 | button[disabled] { 250 | cursor: not-allowed; 251 | } 252 | 253 | input:focus, 254 | textarea:focus, 255 | select:focus, 256 | option:focus, 257 | button:focus { 258 | background-color: var(--fh-focus-bg-color); 259 | border-color: var(--fh-focus-border-color); 260 | } 261 | 262 | input[type="checkbox"]:focus, 263 | input[type="radio"]:focus { 264 | outline: var(--fh-focus-border-color) solid 2px; 265 | } 266 | 267 | button:hover, 268 | input[type="button"]:hover, 269 | input[type="submit"]:hover, 270 | input[type="reset"]:hover, 271 | button:focus, 272 | input[type="button"]:focus, 273 | input[type="submit"]:focus, 274 | input[type="reset"]:focus { 275 | background-color: var(--fh-button-hover-bg-color); 276 | color: var(--fh-button-hover-font-color); 277 | } 278 | --------------------------------------------------------------------------------