Dsdsdsd sdsdsd

Here is an example of an INPUT telephone field with a pattern looking for a phone number like this: “(###) ###-####.” – 933 576 0890

URL input pattern: input type="url" pattern="https?://.+"
IPv4 Address input pattern: input type="text" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}"
Date input pattern (dd/mm/yyyy or mm/dd/yyyy): input type="text" pattern="\d{1,2}/\d{1,2}/\d{4}"
Price input pattern: input type="text" pattern="\d+(\.\d{2})?"
Latitude/Longitude input pattern: input type="text" pattern="-?\d{1,3}\.\d+"

VALIDAÇÃO DE PAGAMENTO

input[type="text"]:valid { color: green;
}

input[type="text"]:valid ~ .input-validation::before { content: "✓"; color: green;
}

input[type="text"]:invalid { color: red;
}

PATTENS IN TEXT FIELDS

This seems a bit buggy in Chrome right now so it might not be the best solution at the moment.
A better solution is to use the pattern attribute, that uses a regular expression to match the input:

Required with pattern for validating text fields

Styling placeholder

CSS: input[placeholder], [placeholder], *[placeholder] { color:red !important;
}
HTML:

With the type=search

[type="search"] { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield;
}

For login forms

Login
2
3 Username
4
5
6 Password
7

For registration

Register

14
15 Username
16
17
18 Password
19

TELEFONE COM VALIDAÇÃO

SENHA PERSONALIZADA

PERSONALIZAÇÃO DE CAMPOS

HTML

Minimum 8 characters, one number, one uppercase letter and one lowercase letter Your password meets our requirements, thank you.

O CSS

.validation01 { background: red; color: #fff; display: none; font-size: 12px; padding: 3px; position: absolute; right: -110px; text-align: