Cómo agregar CSS para el texto tipo de entrada específica

Cuando yo estaba tratando de añadir algunos campos de entrada con CSSCómo agregar CSS para el texto tipo de entrada específica

Tengo un problema

no podía hacer más de un css para algunos campos de entrada

esto es los campos tengo

<input type="text" name="firstName" /> 
<input type="text" name="lastName" />

y el css es

input 
{ 
    background-image:url('images/fieldBG.gif'); 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
    width:235px; 
}

Quiero hacer el primer campo (nombre) con este css

input 
{ 
    background-image:url('images/fieldBG.gif'); 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
    width:235px; 
}

y el segundo (lastName) con este css

input 
{ 
    background-image:url('images/fieldBG2222.gif'); 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
    width:125px; 
}

ayuda por favor :-)

Fuente

2012-05-14 sulaiman

[selectores CSS] (http://www.w3.org/TR/CSS2/selector.html) – Musa

posible duplicado de [Lo HTML/CSS usaría para crear una entrada de texto con un fondo? ] (http://stackoverflow.com/questions/526548/what-html-css-would-you-use-to-create-a-text-input-with-a-background) – ghoppe

@Musa - Este es un poco más fácil de leer http: //net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ –

Utilice el selector de ID.

CSS:

input{ 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
    width:125px; 
} 

#firstname{ 
    background-image:url('images/fieldBG.gif'); 
} 
#lastname{ 
    background-image:url('images/fieldBG2222.gif'); 
}

HTML:

<input type="text" ID="firstname" name="firstName" />  
<input type="text" ID="lastname" name="lastName" />

Todas las entradas serán combinados con el estilo de entrada genérico, y los dos especiales tendrán el estilo especificado por el selector de ID.

Fuente

2012-05-14 18:57:32

Usted puede estilo por tipo o nombre de los elementos del formulario usando CSS.

input[type=text] { 
    //styling 
} 
input[name=html_name] { 
    //styling 
}

Fuente

2012-05-14 18:54:17 Andrew

En este caso html_name es firstName/lastName – Andrew

pero debe poner comillas alrededor del valor (no estoy seguro si funciona sin) Me gusta 'input [type =" text] '- Así es como siempre lo he usado ... – Dion

@ DRP96 prácticamente correcto, acabo de escribir una declaración genérica (las comillas deben agregarse implícitamente). – Andrew

Añadir una etiqueta 'id' a cada una de sus entradas:

<input type="text" id="firstName" name="firstName" /> 
<input type="text" id="lastName" name="lastName" />

continuación, puede utilizar la #selector en el CSS para agarrar cada uno.

input { 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
} 

#firstName { 
    background-image:url('images/fieldBG.gif'); 
    width:235px; 
} 

#lastName { 
    background-image:url('images/fieldBG2222.gif'); 
    width:125px; 
}

Fuente

2012-05-14 18:55:19 miniMacGuru

Usted tiene que cambiar su archivo HTML:

<input type="text" name="firstName" /> 
<input type="text" name="lastName" />

... a:

<input type="text" id="FName" name="firstName" /> 
<input type="text" id="LName" name="lastName" />

y modificar su archivo CSS para:

input { 
    background-repeat:repeat-x; 
    border: 0px solid; 
    height:25px; 
    width:125px; 
} 


#FName { 
    background-image:url('images/fieldBG.gif'); 
} 


#LName { 
    background-image:url('images/fieldBG2222.gif'); 
}

mejor de la suerte!

Fuente

2013-02-13 13:13:53 Ashu

Usa las clases para darle estilo. ellos son una mejor solución. utilizando clases, puede aplicar estilos a cada tipo de entrada individualmente.

<html> 
    <head> 
     <style> 
      .classnamehere { 
       //Styling; 
      } 
     </style> 
    </head> 

    <body> 
     <input class="classnamehere" type="text" name="firstName" /> 
    </body> 
</html>

Fuente

2015-04-07 18:52:55 DeathRs

Cómo agregar CSS para el texto tipo de entrada específica

Respuesta

Cuestiones relacionadas