¡Hola!
Tengo un formulario y quiero usar un selector CSS para modificar el tamaño de todos los input menos del input type submit.
Me gustaría aplicar algo así:
#section3 div input:not(input[type="submit"]) {
width: 350px;
}
pero no me funciona.. ¿alguien podría decirme la forma correcta de incluir ese selector?
El selector:
#section3 div input {
width: 350px;
}
sí que me cambia el tamaño de los inputs, pero también lo hace con el input type submit. Sé que puedo posteriormente volver a cambiar el tamaño del input type submit.. pero me gustaría aplicarlo con un único selector en vez de estar haciendo y deshaciendo estilos.
Código html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Título de la página</title>
<link href="estilos.css" rel="stylesheet">
</head>
<style>
* {
margin: 0px;
font-family: arial;
}
#section2,
#section3 {
text-align: center;
}
#section3 div {
display: inline-block;
vertical-align: top;
width: 600px;
height: 450px;
}
#section3 div form {
text-align: left;
}
#section3 div form label {
display: inline-block;
width: 150px;
margin-right: 1em;
vertical-align: top;
}
#section3 div input:not(input[type="submit"]) {
width: 350px;
}
#section3 div form textarea {
width: 350px;
height: 200px;
}
</style>
<body>
<div class="contenedor">
<!-- SECCION 3 -->
<section id="section3">
<h2>Sección 3</h2>
<div>
<form name="Contacto" method="post" action="#">
<label for="nombre">Nombre y Apellidos</label>
<input type="text" name="nombre" id="nombre" required><br>
<label for="correo">Correo electrónico</label>
<input type="email" name="email" id="correo" required><br>
<label for="tel">Teléfono</label>
<input type="tel" name="tel" id="tel" pattern="[0-9]{9}"><br><br>
<label for="mensaje">Mensaje</label>
<textarea id="mensaje" placeholder="Escriba aquí su mensaje" required></textarea><br><br>
<input type="submit" value="Enviar"><br>
</form>
</div>
</section>
</div>
</body>
</html>
Gracias :)