- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>La pseudoclase :optional</title>
<meta charset="utf-8">
<link rel="stylesheet" href="course.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="page-header">Formulario de datos personales</header>
<main>
<form action="https://echo.htmlacademy.ru/courses" method="post">
<fieldset>
<legend>Solicitud de visa para la cocina</legend>
<label>Nombre del gato</label>
<input type="text" name="name" value="Cupcakecito">
<label>Número de pasaporte felino</label>
<input type="text" name="passport" pattern="[0-9]{3}-[0-9]{5}" placeholder="Formato: XXX-XXXXX" required>
<div class="half-width">
<label>Fecha de nacimiento</label>
<input type="text" name="birthday">
</div>
<div class="half-width">
<label>Visitas</label>
<select name="type">
<option value="Cada hora">Cada hora</option>
<option value="Cada 3 horas">Cada 3 horas</option>
<option value="2 veces al día" selected>2 veces al día</option>
<option value="1 vez al día">1 vez al día</option>
</select>
</div>
</fieldset>
<div class="buttons">
<input type="submit" value="Enviar">
</div>
</form>
</main>
<footer class="page-footer"></footer>
</body>
</html>
CSS
input:required {
background: url('required.png') no-repeat right 50%;
border: 1px solid #e74c3c;
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
- A todos los campos de texto opcionales, asígnales el borde
1px solid #3498db. El botón debe conservar su aspecto. - A los campos de texto opcionales, añádeles la imagen de fondo
optional.png, sin repetición y en la posición100% 50%.