¿Cómo se selecciona un botón de opción en CSS? El HTML con el que estoy trabajando se genera, por lo que no puedo agregarle clase u otros atributos.¿Cómo se selecciona un botón de opción en css?
Encontré la entrada [type = "radio"] en internet, pero no sé si esto es CSS regular y es compatible con la mayoría de los navegadores.
¿Hay otras formas de seleccionar un botón de opción?
Gracias,
Brett
input[type="radio"] es un ejemplo de un attribute selector. Es parte de la especificación CSS3 y es perfectamente legal. El único navegador que no los admite es IE6. Si el soporte de IE6 es importante para el proyecto, entonces debería considerar agregar clases a los botones de radio en cuestión.
Here's an article con un ejemplo de cómo utilizar efectivamente los selectores de atributos. Consulte this article para obtener más información sobre los objetos de CSS3.
El selector de atributos (entrada [type = "radio"]) es la solución correcta, ampliamente apoyado por todo pero IE6 :)
Si no tiene la capacidad de modificar el código HTML para inyectar el apoyo nombre de clase (o el acceso a javascript para lograr esto) entonces sus opciones son:
A). para asegurarse de que su sitio no dependa de esto, y permita que IE6 se degrade graciosamente.
B). vivir sin él
Su solución es la correcta y funcionará en todos los navegadores modernos, aparte de IE6. Para IE6, tendrá que buscar la forma de seleccionarlos, modificar el HTML o usar Javascript.
El que mencionas arriba es la forma correcta de orientarlo por CSS. Se llama attribute selector. No es compatible con IE6 y abajo sin embargo. Se pueden simular agregando un script de comportamiento condicional para IE6. (Solo busca en google, el final del archivo suele ser .htc).
Probablemente debería tenerse en cuenta que los archivos .htc generalmente dan como resultado un rendimiento terrible y solo se deben usar con moderación y se deben probar exhaustivamente para garantizar que el rendimiento sea aceptable.
egad, .htc vudú! Buen pensamiento en soluciones alt. – annakata
puede usar jQuery para seleccionar la entrada y agregar una clase dinámicamente.
Ejemplo (fuente: http://docs.jquery.com/Attributes/addClass#class):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p:last").addClass("selected highlight");
});
</script>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
</body>
</html>
[Editar]
una alternativa a jQuery es utilizar http://code.google.com/p/ie7-js/
que fija un montón de problemas con IE versiones inferior a 7 la solución que más le interesará se ilustra aquí:
Puede usar jQuery para buscar todos los botones de opción en la página y luego agregarle algunas clases de CSS.
¿A qué se refiere su primera URL (enlace)? – Brettski
Eso sería yo copiando el enlace equivocado. Gracias por el aviso. –
Esto no es un regalo de CSS3, en realidad es parte de CSS2. Entonces IE6 no tiene excusa por su falta de soporte. –