Foros del Web » Creando para Internet » CSS »

Mostrar Banderitas de los paises en una Select Name

Estas en el tema de Mostrar Banderitas de los paises en una Select Name en el foro de CSS en Foros del Web. Estoy tratando de mostrarlas en un Option Select con el nombe de los paises, me dijeron que lo haga con CSS, y no consigo que ...
  #1 (permalink)  
Antiguo 26/11/2010, 17:40
Usuario no validado
 
Fecha de Ingreso: abril-2009
Ubicación: Buenos Aires
Mensajes: 413
Antigüedad: 15 años
Puntos: 3
Mostrar Banderitas de los paises en una Select Name

Estoy tratando de mostrarlas en un Option Select con el nombe de los paises, me dijeron que lo haga con CSS, y no consigo que funcione.
Me parece que estoy cerca, lo estoy probando pero no me muestra la banderita, el nombre lo muestra bien, si no es molestia les paso el codigo de lo que estoy haciendo, seguro que me falta alguna pavada.

Este es e PHP:
<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<link href="aa1.css" rel="stylesheet" type="text/css" />
</head>
<br/>
<select name="countries" id="countries" class="icon-menu">
<option value="">Select el Pais</option>
<option value="AR">Argentina</option>
<option value="UR">Uruguay</option>
<option value="BR">Brasil</option>
<option value="CH">Chile</option>
</select>
<body>
</body>
</html>

y este el CSS:
/* CSS Document */
select.icon-menu option {
background-repeat:no-repeat;
background-position:bottom left;
padding-left:30px;
}
select#countries option[value="AR"] {
background-image:url(../fotos/pais_15.bmp);
}
select#countries option[value="UR"] {
background-image:url(../fotos/pais_30.bmp);
}
select#countries option[value="BR"] {
background-image:url(../fotos/pais_33.bmp);
}
select#countries option[value="CH"] {
background-image:url(../fotos/pais_45.bmp);
}

Muchas Gracias por su ayuda.
  #2 (permalink)  
Antiguo 27/11/2010, 01:11
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 14 años, 4 meses
Puntos: 17
Respuesta: Mostrar Banderitas de los paises en una Select Name

Cita:
<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<link href="aa1.css" rel="stylesheet" type="text/css" />
</head>
<br/>
<select name="countries" id="countries" class="icon-menu">
<option>Select el Pais</option>
<option class="AR" value="AR">Argentina</option>
<option class="UR" value="UR">Uruguay</option>
<option class="BR" value="BR">Brasil</option>
<option class="CH" value="CH">Chile</option>
</select>
<body>
</body>
</html>
CSS:

Cita:
select.icon-menu option {
background:no-repeat bottom left;
padding-left:30px;
}
select#countries option.AR{
background-image:url(../fotos/pais_15.bmp) no-repeat;
}
select#countries option.UR{
background-image:url(../fotos/pais_30.bmp) no-repeat;
}
select#countries option.BR{
background-image:url(../fotos/pais_33.bmp) no-repeat;
}
select#countries option.CH{
background-image:url(../fotos/pais_45.bmp) no-repeat;
}
Si usas photoshop o algún editor de imágenes, guarda las imágenes como .png es preferible.

Cualquier duda puedes consultar.

Etiquetas: select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:25.