Cambiar el aspecto de un enlace deshabilitado

Question

¿Es posible cambiar la apariencia de un enlace html cuando está deshabilitado? Por ejemplo, usando algo como:

a.disabled 
{ 
    color:#050; 
} 

<a class="disabled" disabled="disabled" href="#">Testing</a> 

El ejemplo anterior no parece trabajar con IE pero funciona para Firefox, IE sigue siendo el gris, incluso cuando me puse el color en el estilo. Si elimino el disabled="disabled", sin embargo, funciona.

Answer 1

La clase :disabled pseduo sólo funciona con campos de entrada, como texto, radio, casillas de verificación, etc., y se aplica cuando se da el elemento del atributo `discapacitados = "desactivado". IE6, sin embargo, no reconoce la pseudoclase, por lo que deberá usar una clase por separado para que funcione.

<input type="text" value="You can't type here" disabled="disabled" class="disabled" /> 

puede ser de estilo con clase

input[disabled="disabled"], input.disabled { 
    /* whatever you want */ 
} 

El seudo se aplicará a los navegadores modernos, mientras que la clase cubrirá IE6.

Como dijo Radeksonic, si desea que el CSS deshabilitado aparezca en otros elementos, como anclas, solo tendrá que crear y usar una clase. No hay ningún atributo deshabilitado para <a> s

Answer 2

Uso

a.disabled 
{ 
    color: #CCC;/* Just an example */ 
} 

sólo tiene que utilizar un punto seguido de un nombre de clase para indicar que desea utilizar esa clase.

funciona en todos los navegadores

Answer 3

< a class = "desactivado"> Mi vínculo con discapacidad </a>

a.disabled { 
    display:none; 
} 

sólo hay 5 (creo) pseudo-class selectors for links: enlace, visitó, flotar, y activo, y foco.

Answer 4

Para un enlace como el que se ha proporcionado en el comentario:

<a href="#" disabled="disabled">some link</a> 

El estilo sería (al igual que cualquier otro selector basado en un atributo):

a[disabled=disabled] { 
    color: red; 
    font-weight: bold; 
} 

Si estuviera en Sin embargo, en su lugar, verificaría el comportamiento del navegador cruzado. No he visto el atributo disabled antes.

Answer 5

Por supuesto, el solo hecho de agregar una clase para dar estilo a sus elementos <a> de una manera particular no va a detenerlos, en realidad, realizar su acción normal. Para eso, necesitarás javascript. De manera básica, usted podría tener:

<a href="foo.htm" class="disabled" onclick="return false;">linky</a> 

Answer 6

si utiliza JQUERY puede agregar atributo para anclar

.attr("disabled","true") 

y quitarlo

.removeAttr("disabled") 

Answer 7

podría utilizar el attribute selector para la plena soporte de navegador

Esto será suficiente:

a[disabled] { 
    display:none; 
} 

---

selectores de atributos

[att]  

de ajuste cuando el elemento establece el atributo "att", sea cual sea el valor del atributo.

[att=val] 

Igualar cuando el valor del atributo "att" del elemento sea exactamente "val".

[att~=val] 

representa un elemento con el atributo att cuyo valor es una lista blanca separada por espacios de palabras, uno de los cuales es exactamente "val". Si "val" contiene espacios en blanco, nunca representará nada (ya que las palabras están separadas por espacios). Si "val" es la cadena vacía, nunca representará nada.

[att|=val] 

representa un elemento con el atributo att, su valor o bien ser exactamente "val" o que comienzan con "val" seguido inmediatamente por "-" (U + 002D). Esto está destinado principalmente a permitir coincidencias de subcódigo de idioma (por ejemplo, el atributo hreflang en el elemento a en HTML) como se describe en BCP 47 ([BCP47]) o su sucesor. Para la coincidencia de subcódigo de idioma lang (o xml: lang), consulte la pseudoclase: lang.