How to style the input field when there is an error, as in the layout?

5d49d6a761436368226427.jpeg
March 25th 20 at 13:40
3 answers
March 25th 20 at 13:42
Solution
border: 1пх solid pink
border radius: 50 pkh
padding: 15пх 20пх
background-color: Belenky
Need a plugin for PostCSS gash))) - Albertha79 commented on March 25th 20 at 13:45
@Albertha79, already eclipsing https://www.npmjs.com/package/postcss-russian-styl... - marlon_Kessler commented on March 25th 20 at 13:48
@marlon_Kessler, it's time to go PostCSS)) - Katharina.Bo commented on March 25th 20 at 13:51
height: 10ногтей;
 width: 4перста;


:D - Wilson.Tillman commented on March 25th 20 at 13:54
not in the direction you thought - iva_Leuschke23 commented on March 25th 20 at 13:57
March 25th 20 at 13:44
Solution
I mean? To paint the frame and add the text below the input. At what point the problem?
You want to not enter this field, there is, instead of the usual prompt "complete this field" - Finn67 commented on March 25th 20 at 13:47
@Finn67,
To remove the attribute requided. This is because it seems the default tooltip.

I write how to do it simple.

<input type="text" placeholder="Your Email" pattern="^([a-z0-9_-]+\.)*[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,6}$"/>
<p class="error__block">Fill in the field!!!</p>


pattern - the regular season to validate the input email
(htmlbook.ru/html/input/pattern)

In CSS write something like

.error__block{
 display: none;
}
input:invalid + .error__block{
 display: block
}


For other inputof(not email) your need of the regular season. They are easy to find in the Internet.
You can also use the attributes min and max (minimum and maximum values). - edgardo6 commented on March 25th 20 at 13:50
March 25th 20 at 13:46
Solution

Find more questions by tags FrontendWeb DevelopmentHTMLCSS