Aplicar estilos distintos a campos diferentes de un formulario

evoarte · #1 (**permalink**) 22/07/2013, 06:11

buenas tardes,

he tropezado con este problema de forma inesperada,
tengo un formulario tabulado con una tabla, y necesito dar un formato distinto a algunos de los campos del formulario, pero no lo logro:

si tengo por ejempo:

Código HTML:

Ver original<form>
<input type="text" id="campo1">
<input type="text" id="campo2" class="csscampo2">
</form>

pues resulta que las reglas que defino en csscampo2 no se aplican, es decir, se heredan las propiedades generales del formulario, y viendo las herramientas para desarrolladores los estilos definidos en csscampo2 se anulan.

¿cómo se resuelven estos casos?
(me tiene desesperado)

un saludo,
josé carlos.

pzin · #2 (**permalink**) 22/07/2013, 06:16

¿Cómo estás indicando tus estilos? Sin eso poco te podemos ayudar.

Puede ser que sea un problema de especificidad de CSS. Pero bueno, habría que ver los selectores que seguramente vayas a publicar.

lauser · #3 (**permalink**) 22/07/2013, 10:01

Deberías definir y separar los campos en el CSS.

Rafael · #4 (**permalink**) 22/07/2013, 10:21

Yo de plano, de plano, siempre que pongo un input type=text, le agrego un class=text y a los button su class igualito por ejemplo.

evoarte · #5 (**permalink**) 22/07/2013, 10:46

quiero especificar un color de fondo distinto:

por ejemplo:
si especifico un background:#F5F5F5
para todos los input del formulario

Código HTML:

Ver original<form class="cssform" id="formulario">

Código CSS:

Ver original.cssform{
background:#F5F5F5
}

y luego aplico una clase a un elemento individual

Código HTML:

Ver original<input type="text" id="campo1" class="csscampo1">

Código CSS:

Ver original.csscampo1{
background:#FFFFFF;
}

no toma el fondo especificado individualmente al input campo1, consultando las herramientas para webmasters, aparece anulado.

un saludo,
josé carlos.

pzin · #6 (**permalink**) 22/07/2013, 11:16

Uhm. Si le especificas un fondo a form no se van a poner los elementos del formulario de ese color, sino el propio formulario, ya que form es un elemento en si mismo.

Tal cual lo indicas en tu código, no debería de ocurrir lo que mencionas. ¿Podrías poner el código necesario para reproducir el problema? Seguro que es alguna otra cosa que no estás teniendo en cuenta.

evoarte · #7 (**permalink**) 22/07/2013, 11:49

hola,

bien, en realidad el formato está definido así, es decir, está aplicado a los input:

Código CSS:

Ver original.cssform input{
background:#F5F5F5
}

pzin · #8 (**permalink**) 22/07/2013, 11:56

Pues es un problema de especificidad de CSS. Es más específico el selector .cssform input que .csscampo1; el primero tiene 0011 y el segundo 0010.

Te valdría con hacer:

Código CSS:

Ver originalinput.csscampo1 {
  background:#FFFFFF;
}

Así tendrían la misma especificidad —0011, una clase y un elemento— y se aplicaría el último que tengas declarado en tu hoja de estilos.

evoarte · #9 (**permalink**) 22/07/2013, 13:53

así solo se aplican los estilos de dnparform y inparform que no están definidos en .neparform input:

Código CSS:

Ver original.nparform input {
font-family:Arial;
font-size:14px;
background:#F5F5F5
}
 
.dnparform {
font-size:10px;
}
 
.inparfom {
background:#FFFFFF;
border:1px solid #c0c0c0;
border-radius:5px;
}

de esta forma, no se aplican los estilos de dnparform ni inparform

Código CSS:

Ver original.nparform input {
font-family:Arial;
font-size:14px;
background:#F5F5F5
}
 
input .dnparform {
font-size:10px;
}
 
input .inparfom {
background:#FFFFFF;
border:1px solid #c0c0c0;
border-radius:5px;
}

y si utilizo esta alternativa, tampoco se aplican los estilos de dnparform ni inparform

Código CSS:

Ver original.nparform input {
font-family:Arial;
font-size:14px;
background:#F5F5F5
}
 
.dnparform input {
font-size:10px;
}
 
.inparfom input {
background:#FFFFFF;
border:1px solid #c0c0c0;
border-radius:5px;
}

y la verdad no se cual es la solución.
es posible que el problema radique en que los input se crean de forma dinámica.

podría aplicar un estilo diferente a cada input, y no definir esos formatos de forma general,
pero creo que debe haber una mejor solución.

un saludo,
josé carlos.

Mikmoro · #10 (**permalink**) 22/07/2013, 14:57

¿Y si lo pones así?

CSS
<style type="text/css">
.cssform{background:#F5F5F5}
input.csscampo1{background:#FFFF00;}
</style>

HTML
<body>
<form class="cssform" id="formulario">
<input type="text" id="campo1" class="csscampo1"/>
<input type="text" id="campo2" class="csscampo2"/>
</form>
</body>

evoarte · #11 (**permalink**) 22/07/2013, 15:18

buenas noches,

así no se aplican los estilos que se definen de forma general, es decir,

Código CSS:

Ver original.nparform {
font-family:Arial;
font-size:14px;
background:#F5F5F5
}

un saludo,
josé carlos.

pzin · #12 (**permalink**) 22/07/2013, 15:20

En ninguno de tus ejemplos has puesto el selector como te hemos dicho. La cosa es poner input y .csscampo1 juntos, sin ningún tipo de espacio.

Mikmoro · #13 (**permalink**) 22/07/2013, 15:32

Cita:

Iniciado por evoarte

buenas noches,

así no se aplican los estilos que se definen de forma general, es decir
josé carlos.

¿Has probado este código así exactametne como te lo pongo y no te funciona como tú querías?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head><title>evoarte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.cssform{background:#F5F5F5}
input.csscampo1{background:#FFFF00;}
</style>
</head>
<body>
<form class="cssform" id="formulario">
<input type="text" id="campo1" class="csscampo1"/>
<input type="text" id="campo2" class="csscampo2"/>
</form>
</body>
</html>

Para ver si funcionan o no esas otras clases como quieres deberías poner el hmtl tal y como lo estás usando.

evoarte · #14 (**permalink**) 23/07/2013, 01:19

lo he probado exactamente igual.

un saludo,
josé carlos.

pzin · #15 (**permalink**) 24/07/2013, 05:37

Pues sólo queda que pongas el código completo que estás usando, porque algo estarás haciendo mal seguramente.

Adjunta HTML y CSS, como digo, completo. O crea un jsfiddle y nos pasas la URL:

Mikmoro · #16 (**permalink**) 24/07/2013, 09:02

Cita:

Iniciado por evoarte

buenas tardes,
pues resulta que las reglas que defino en csscampo2 no se aplican, es decir, se heredan las propiedades generales del formulario, y viendo las herramientas para desarrolladores los estilos definidos en csscampo2 se anulan.

¿cómo se resuelven estos casos?
(me tiene desesperado).

Cita:

Iniciado por evoarte

quiero especificar un color de fondo distinto:

por ejemplo:
si especifico un background:#F5F5F5
para todos los input del formulario

y luego aplico una clase a un elemento individual

no toma el fondo especificado individualmente al input campo1, consultando las herramientas para webmasters, aparece anulado.

Esto decías en tu consulta original, y yo creo que el código de ejemplo que te he puesto hace exactamente eso, es decir: define un color de fondo de manera global al form con la clase .cssform, y luego personaliza otro color de fondo para el input específico con la clase .csscampo1, es decir, lo que pedías, y funciona perfectamente.
Como te dice el moderador pzin, concreta bien tu consulta.

evoarte · #17 (**permalink**) 24/07/2013, 09:48

gracias por vuestro interés,
lo he solucionado definiendo una class para cada input,
no he logrado resolverlo de otra manera,

(es un formulario al que se van agregando filas de forma dinámica)

gracias,
espero seguir contando con vuestra ayuda

un saludo,
josé carlos.

Mikmoro · #18 (**permalink**) 24/07/2013, 09:50

Lo dicho: si quieres buscar una mejor solución pon un trozo de html generado dinámicamente y el correspondiente CSS; si no, creo que algún día la generación dinámica y asignar clases diferentes con un random o algo así te va a dar más de un problema.
Saludos.