3

¡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 :)

1

3 respuestas 3

4

El planteamiento que tenías era muy acertado, te faltaba excluir la alusión a la etiqueta <input> dentro del not().

input:not([type="submit"]) {
     width: 350px;
 }
<form>
  <input type="text">
  
  <input type="submit">
</form>

3

Lo mas simple en estos casos sería que manejes la selección a través de clases y ids considerando:

  • Todos los inputs de tipo (text, email, etc) pueden tener la clase texto-ingresado, de esta forma solo aquellos que tengan dicho atributo se verán afectados por el CSS declarado
  • El input de tipo submit le podemos dar un id envio considerando que es un elemento con una funcionalidad totalmente distinta a los demás ya mencionados y lo podemos identificar dentro del form de forma única

De manera que si por ejemplo a tu HTML lo dejas así:

<form name="Contacto" method="post" action="#">
  <label for="nombre">Nombre y Apellidos</label>
    <input class="texto-ingresado" type="text" name="nombre" id="nombre" required><br>
  <label for="correo">Correo electrónico</label>
    <input class="texto-ingresado" type="email" name="email" id="correo" required><br>
  <label for="tel">Teléfono</label>
    <input class="texto-ingresado" 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 id="envio" type="submit" value="Enviar"><br>
</form>

Entonces tus reglas de selección se pueden componer de esta forma:

<style>
  .texto-ingresado {
    border-radius: 5px;
  }
  #envio {
    border-radius: 10px;
    border: 1px solid;
  }
</style>
2

Hay varias opciones para solucionar esto: Puedes utilizar selectores basados en las propiedades de los inputs que quieres modificar:

input[type="email"], input[type="text"]{ /*Todos los inputs de tipo text o email van a ser afectados*/
background-color: red;
}

Puedes usar clases como han dicho en otras respuestas, y más. Te recomiendo que leas esta documentación ya que te puede servir mucho.

Documentación:

Pseudo selectores CSS

Selector CSS por atributo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.