css a formularios

[erick_arcini]

Hola que tal, estoy creando un formulario web pero tengo una falla, resulta que en mi css tengo el siguiente estilo:

input /*CODIGO 1*/
{
font-size:11px;
color:#003399;
background-color:#E0E0E0;
font-family: Arial;
font-variant: normal;
color:#0000EC;
border:Groove;
border-width:1px;
width:120px;
height:14px;
}

input:focus
{
font-size:11px;
color:#003399;
background-color:#FEB00E;
font-family: Arial;
font-variant: normal;
color:#0000EC;
border:Groove;
border-width:1px;
width:120px;
height:14px;
}

este estilo me lo toma para todos los inputs que inserte (textos, botones, etc) pero el problema esta en que tambien me los coloca para los rabiobutton que es cosa que no quiero que haga, yo hice lo siguiente:


input.radio /*CODIGO 2*/
{
font-size:11px;
color:Black;
font-family:Arial;
font-variant:normal;
}

pero no furula (funciona) que le tengo que hacer para que en ciertos inputs me coloque el estilo /*CODIGO 1*/ que puse arriba y que le tengo que hacer para que los "radio" me aparezcan como el estilo /*CODIGO 2*/ sin necesidad de usar "class" dentro del codigo html?

[AlvaroG]

todo sería tan fácil si internet explorer aceptara los selectores.....
Bastaría con hacer esto:

input[type="radio"]

como selector para los "input" de tipo "radio".

Pero como al internet explorer no le gustan esos selectores, las posibilidades son 2:
-> usar clases para los elementos distintos
-> usar javascript para modificar el css.

La vida es triste, pero lamentablemente a la gente le gusta el IE....


Saludos.

[fearlex]

Gracias a Internet explorer, no hay forma de hacerlo, rezemos para cuando el IE8 salga :D

[erick_arcini]

Iniciado por alvlin

todo sería tan fácil si internet explorer aceptara los selectores.....
Bastaría con hacer esto:

input[type="radio"]

como selector para los "input" de tipo "radio".

Pero como al internet explorer no le gustan esos selectores, las posibilidades son 2:
-> usar clases para los elementos distintos
-> usar javascript para modificar el css.

La vida es triste, pero lamentablemente a la gente le gusta el IE....


Saludos.

No se si esa fue pedrada, pero afortunadamente a mi me gusta romper con lo cotidiano y no cerrar mi mente, me gustan los retos.

Pero regresando al tema, es que para este caso ni el FireFox y ni el IE me funciona, supongo que debe de ser por que manejo controles de asp.net, aunque estos son los controles de HTML con una embarrada de microsoft, pero lo que tuve que hacer es colocarlo con class, no me quedo de otra.

[turco_7]

para que funcione en IE hay que escribir la caja de texto de la siguiente forma.

Código HTML:

<style type="text/css">
input {
      border: 2px solid #ccc;
}
input:focus {
     border: 2px solid #000;
}
</style>

<input type="text" name="nombredecampo" id="nombredecampo" onfocus="this.style.border='1px solid #f00'" onblur="this.style.border='1px solid #bbb'"> 

Para solucionar tu problema vas a tener que usar una clase del siguiente modo:

Código HTML:

.TextBox /*CODIGO 1*/
{
font-size:11px;
color:#003399;
background-color:#E0E0E0;
font-family: Arial;
font-variant: normal;
color:#0000EC;
border:Groove;
border-width:1px;
width:120px;
height:14px;
}

.TextBox:focus
{
font-size:11px;
color:#003399;
background-color:#FEB00E;
font-family: Arial;
font-variant: normal;
color:#0000EC;
border:Groove;
border-width:1px;
width:120px;
height:14px;
}

<input type="text" name="nombredecampo" id="nombredecampo" onfocus="this.style.border='1px solid #f00'" onblur="this.style.border='1px solid #bbb'" class="TextBox"> 

Espero que te sirva, yo tampoco tengo mucha experiencia en css pero es lo que uso...

Saludos