Dia 21

Practicas/Practicas HTML/Formularios/Practica 4/css/style.css

@@ -15,7 +15,6 @@ input:-webkit-autofill:active {
     box-shadow: 0 0 0 1000px rgba(0, 0, 0, 1) inset !important;
     -webkit-text-fill-color: white ;
 } */
-
 html {
   height: 100%;
 }
@@ -41,29 +40,30 @@ body {
 
 .form_title {
   background-color: rgba(0, 0, 0, 0.6);
-  border: 2px solid rgb(41, 93, 170);
+  border: 2px solid #144b9e;
   box-sizing: border-box;
   border-radius: 0.5em;
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 1); /* offsetX, offsetY, blurRadius, color */
   padding: 0.2em 0;
   text-align: center;
-  color: yellow;
+  color: #ffcb00;
 }
 
 .form_main {
   background-color: rgba(0, 0, 0, 0.6);
-  border: 2px solid rgb(41, 93, 170);
+  border: 2px solid #144b9e;
   box-sizing: border-box;
   border-radius: 0.5em;
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 1); /* offsetX, offsetY, blurRadius, color */
   padding: 0.3em;
-  color: yellow;
+  color: #ffcb00;
   display: flex;
   flex-direction: column;
   gap: 0.5em;
 }
+
 .form_main > fieldset {
-  border: 2px solid rgb(41, 93, 170);
+  border: 2px solid #144b9e;
   box-sizing: border-box;
   border-radius: 0.5em;
   box-shadow: 10px;
@@ -109,11 +109,35 @@ input:focus {
 }
 
 .btn {
-  border: 2px solid rgb(41, 93, 170);
+  border: 2px solid #144b9e;
   box-sizing: border-box;
 }
 .btn:hover {
-  background-color: rgb(41, 93, 170);
+  background-color: #144b9e;
+}
+
+input:invalid,
+select:invalid,
+textarea:invalid {
+  /* Estilos para elementos inválidos */
+  border: 2px solid red; /* Por ejemplo, un borde rojo para resaltar */
+  background-color: #ffcccc; /* Un fondo de color claro */
+  color: black;
+}
+input:invalid ~ .verificado{
+  display: none;
+}
+
+input:valid ~ .verificado{
+  display: inline;
+}
+
+input:invalid ~ .erroneo{
+  display: inline;
+}
+
+input:valid ~ .erroneo{
+  display: none;
 }
 
 /* Media Queries */