Checkbox con borde

markmb · #1 (**permalink**) 25/06/2010, 06:20

Tengo un formulario unas comprobaciones en php, que si no dan bien, vuelven al formulario y marcan los campos en rojo:

Código:

#error input, #error button, #error select, #error textarea{
border: 2px solid #FF0000;
}

Esta es la parte del CSS, solamente.

Pero el problema es que si lo pongo en un chekbox, no va. Por que puede ser?

Código fuente de un campo que sí funciona el borde rojo:

Código HTML:

<div id="error"><p>Nombre*: <input type="text" name="nombre"/></p></div>

Código fuente del checkbox que debería estar marcado en rojo:

Código HTML:

<div id="error"><p><input type="checkbox" name="condiciones" value="1" /> He leido las <a href="************">condiciones de uso</a> y hago constar que acepto dichas condiciones.		</p></div>

deirdre · #2 (**permalink**) 25/06/2010, 07:11

Hola markmb

En lugar de usar id hazlo con clases y le aplicas esa clase al input. Así debería funcionarte.

Bye

markmb · #3 (**permalink**) 25/06/2010, 07:39

Tampoco va. He cambiado las almohadillas por puntos y "id" por "class" y tampoco va. También he probado en aplicarle la clase al párrafo, y tampoco va.

Creo que el problema es el mismo checkbox, porque ni poniéndolo directo va.

deirdre · #4 (**permalink**) 25/06/2010, 18:33

Hola markmb

Aquí tienes una solución. Antes de adaptarla a tu página haz un copy-paste en un html en blanco y lo pruebas (y haces los ajustes que necesites).

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Marcado de errores</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#cont {
	width: 600px;
	margin: 30px auto 0 auto;
}
.error {
	border: 2px solid #FF0000;
	padding-left: 3px;
	padding-right: 3px;
}
.alt {
	line-height: 24px; /* necesario para que iexplorer 6 y 7 dibujen la raya de abajo del cuadrado */
}
</style>

</head>

<body>
<div id="cont">
	<p>Nombre*: <input class="error" type="text" name="nombre"/></p>
	<p class="alt"><span class="error"><input type="checkbox" name="condiciones" value="1" /></span> He leido las <a href="************">condiciones de uso</a> y hago constar que acepto dichas condiciones.</p>
</div>
</body>

</html>

Funciona en todos los navegadores.

Bye

markmb · #5 (**permalink**) 26/06/2010, 02:58

Gracias!! Va perfecto!!

deirdre · #6 (**permalink**) 26/06/2010, 09:13

Hola markmb

Me alegra que te sirva. Suerte con el proyecto.

Bye