Hello!
I have a form and I want to use a CSS selector to resize all the inputs except the input type submit.
I would like to apply something like this:
#section3 div input:not(input[type="submit"]) {
width: 350px;
}
but it doesn't work for me.. could someone tell me the correct way to include that selector?
The chooser:
#section3 div input {
width: 350px;
}
yes it changes the size of the inputs, but it also does it with the input type submit. I know I can later resize the input type submit... but I'd like to apply it with a single selector instead of doing and undoing styles.
Html code:
<!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>
Thank you :)
The approach you had was very successful, you needed to exclude the allusion to the label
<input>
within thenot()
.The simplest thing in these cases would be that you manage the selection through classes and ids considering:
texto-ingresado
, in this way only those that have said attribute will be affected by the declared CSSsubmit
We can give the type input an idenvio
considering that it is an element with a totally different functionality from the others already mentioned and we can uniquely identify it within the formSo if, for example, you leave your HTML like this:
So your selection rules can be composed like this:
There are several options to work around this: You can use selectors based on the properties of the inputs you want to modify:
You can use classes as other answers have said, and more. I recommend that you read this documentation as it can help you a lot.
Documentation:
pseudo css selectors
CSS selector per attribute