¿Cómo seleccionar campos de entrada de texto usando el selector CSS?

El selector de atributos CSS se utiliza para apuntar a campos de texto de entrada. Los campos de texto de entrada de tipo ‘texto’ se pueden orientar utilizando input[type=text] .

Nota: Se especifica que los valores de atributos predeterminados no siempre se pueden seleccionar con selectores de atributos, uno podría tratar de cubrir otros casos de marcado para los que se representan las entradas de texto.

  • input:not([type]): se usa cuando el atributo de tipo no está presente en el marcado.
  • entrada[tipo = “”]: Se usa cuando el atributo de tipo está presente, pero vacío.
  • entrada[tipo = texto]: se utiliza cuando el atributo de tipo se define explícitamente como ‘texto’.

Ejemplo 1: este ejemplo selecciona los campos de texto de entrada y usa alguna propiedad CSS.

<!DOCTYPE html>
<html>
  
<head>
    <style>
        input[type="text"] {
            width: 400PX;
            display: block;
            background:lightgreen;
            color:black; 
            text-align:justiy; 
            font-size: 150%;
        }
          
        form {
            display:table-cell; 
            width:50%; 
            padding:10px; 
        }
    </style>
</head>
  
<body>
    <form name="input" action="" method="get">
      
        Bestplatform :
                <input type="text" name="Name" 
                        value="GfG" size="20">
          
        Fullform :
                <input type="text" name="Name" 
                    value="GeeksforGeeks" size="20">
    </form>
</body>
  
</html>                    

Producción:

Ejemplo 2: este ejemplo selecciona los campos de texto de entrada y usa alguna propiedad CSS.

<!DOCTYPE html>
<html>
  
<head>
      
    <!-- CSS style to select type attribute -->
    <style>
        input[type="text"] {
            width: 400PX;
            display: block;
            background:green;
            color:white; 
            text-align:justiy; 
            font-size: 150%;
        }
          
        form {
            display:table-cell; 
            width:50%; 
            padding:10px; 
        }
    </style>
</head>
  
<body>
    <form name="input" action="" method="get">
  
        USER : <input type="text" name="Name" 
                value="GeeksforGeeks" size="20">
  
        PASSWORD : <input type="text" name="Name" 
                value="geeksforgeeks" size="20">
  
        CATEGORY : <input type="text" name="Name" 
                value="Studying platform" size="20">
    </form>
</body>
  
</html>                    

Producción:

Publicación traducida automáticamente

Artículo escrito por ashishsaini3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *