Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- * {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- text-decoration: none;
- border: 0;
- font-family: 'Open Sans', sans-serif;
- font-size: 16px;
- }
- body {
- max-width: 100%;
- background: #f0f0f0;
- }
- main.formContainer {
- border: 1px solid #D3D7D9;
- background: #FFFFFF;
- border-radius: 5px;
- box-shadow: 0px 1px 5px 1px #F5F9FA;
- margin: 2.5% auto;
- padding: 2%;
- width: 95%;
- max-width: 600px;
- }
- .form-title {
- font-size: 1.5rem;
- color: #776AFF;
- text-shadow: 0px 1px 0px currentColor;
- margin-bottom: 5%;
- }
- .form-body,
- .form-footer {
- font-size: 1.25rem;
- }
- .form-body-group {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- }
- .form-input {
- width: 100%;
- height: 2rem;
- padding: 1% 2px;
- text-indent: 5px;
- margin: 2.5% 0;
- border: 1px solid #E0E4E6;
- border-radius: 3px;
- font-size: 1rem;
- box-shadow: 0px 1px 1px lightgrey;
- outline: none;
- transition: all ease-in-out;
- }
- input.form-input:-webkit-autofill {
- background: transparent;
- text-fill-color: transparent;
- /*-webkit-box-shadow: 0 0 0 30px white inset !important */
- }
- .form-input:required {
- border-color: #D5FCFF;
- }
- .form-input:valid {
- border-color: #00A20B;
- }
- div.invalid-input {
- color: red;
- width: 100%;
- font-size: 12px;
- }
- .form-input:invalid {
- /*border-color: #FFCACA;*/
- }
- .form-footer {
- padding: 2.5%;
- }
- .form-footer > input {
- border-radius: 3px;
- height: 40px;
- padding: 5px 15px;
- width: 60%;
- margin: 0 auto;
- display: block;
- background: #776AFF;
- color: white;
- border: 1px solid #776AFF;
- transition: all ease-in-out 150ms;
- }
- .form-footer > input:hover {
- cursor: pointer;
- color: #776AFF;
- background: transparent;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement