web-dev-qa-db-fra.com

Comment désactiver un lien en utilisant uniquement CSS?

Est-il possible de désactiver un lien en utilisant CSS?

J'ai une classe appelée current-page et je veux que les liens avec cette classe soient désactivés afin qu'aucune action ne se produise lorsque l'utilisateur clique dessus.

htmlcss
785
RSK

La réponse est déjà dans les commentaires de la question. Pour plus de visibilité, je copie cette solution ici:

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}
<a href="link.html" class="not-active">Link</a>

Pour obtenir une assistance du navigateur, veuillez consulter https://caniuse.com/#feat=pointer-events . Si vous devez prendre en charge IE, il existe une solution de contournement. voir cette réponse .

Avertissement: L'utilisation de pointer-events en CSS pour des éléments non-SVG est expérimentale. La fonctionnalité faisait partie du projet de spécification d'interface utilisateur CSS3, mais a été reportée à CSS4 en raison de nombreux problèmes non résolus.

1271
RSK

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
<a href="#" class="disabled">link</a>

127
amir

CSS ne peut être utilisé que pour changer le style de quelque chose. Le mieux que vous puissiez faire avec du CSS pur est de cacher complètement le lien.

Ce dont vous avez vraiment besoin, c'est du javascript. Voici comment faire ce que vous voulez en utilisant la bibliothèque jQuery.

$('a.current-page').click(function() { return false; });
121
nickf

CSS ne peut pas faire ça. CSS est pour la présentation seulement. Vos options sont:

  • N'incluez pas l'attribut href dans vos balises <a>.
  • Utilisez JavaScript pour rechercher les éléments d'ancrage avec cette variable class et supprimez leurs attributs href ou onclick en conséquence. jQuery pourrait vous aider avec ça (NickF a montré comment faire quelque chose de similaire mais mieux).
32
Kevin Conner

Lien Bootstrap désactivé 

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

Bootstrap Disabled Button mais il ressemble à un lien 

<button type="button" class="btn btn-link">Link</button>
29
Jigar Bhatt

Vous pouvez définir l'attribut href sur javascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}
<a class="disabled" href="javascript:void(0)">LINK</a>
19
Xinus

Si vous souhaitez vous limiter à HTML/CSS dans un formulaire, vous pouvez également utiliser un bouton. Donnez-lui un style et définissez l'attribut disabled.

E.g . http://jsfiddle.net/cFTxH/1/

10
Sebastian Patten

La seule façon de le faire sans CSS serait de définir un CSS sur une division d'habillage qui vous aurait fait disparaître et que quelque chose d'autre prenne sa place.

PAR EXEMPLE:

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

Avec un CSS comme

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

Pour désactiver réellement le A, vous devrez remplacer son événement click ou href, comme décrit par d'autres.

PS: Juste pour clarifier, je considérerais ceci comme une solution assez désordonnée, et pour le référencement, ce n’est pas le meilleur non plus, mais je crois que c’est le meilleur avec les CSS.

10
fyjham

Si vous voulez que ce soit uniquement du CSS, la logique de désactivation doit être définie par CSS.

Pour déplacer la logique dans les définitions CSS, vous devez utiliser des sélecteurs d'attributs. Voici quelques exemples :

Désactiver le lien qui a un href exact: =

Vous pouvez choisir de désactiver les liens contenant une valeur href spécifique, comme ceci:

<a href="//website.com/exact/path">Exact path</a>

[href="//website.com/exact/path"]{
  pointer-events: none;
}

Désactiver un lien contenant un morceau de chemin: *=

Ici, tout lien contenant le chemin /keyword/in sera désactivé

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

Désactiver un lien qui commence par: ^=

l'opérateur [attribute^=value] cible un attribut commençant par une valeur spécifique. Vous permet de supprimer les sites Web et les chemins racine.

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

Vous pouvez même l'utiliser pour désactiver les liens non-https. Par exemple :

a:not([href^="https://"]){
  pointer-events: none;
}

Désactiver un lien qui se termine par: $=

L'opérateur [attribute$=value] cible un attribut qui se termine par une valeur spécifique. Il peut être utile de supprimer les extensions de fichier.

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

Ou tout autre attribut

Css peut cibler n'importe quel attribut HTML. Pourrait être rel, target, data-customet ainsi de suite ...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

Combinaison de sélecteurs d'attributs

Vous pouvez chaîner plusieurs règles. Supposons que vous souhaitiez désactiver tous les liens externes, mais pas ceux pointant vers votre site Web:

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

Ou désactivez les liens vers les fichiers pdf d'un site Web spécifique:

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

Support du navigateur

Les sélecteurs d'attributs sont supportés depuis IE7. :not() sélecteur depuis IE9.

9
Creaforge

Essaye ça:

<style>
.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
</style>
9
Benk

La propriété pointer-events permet de contrôler le fonctionnement des éléments HTML répondre aux événements de souris/contact - y compris les états de survol/actifs CSS, cliquez/tapez sur les événements en Javascript, et si le curseur est ou non visible.

C'est pas la seule façon de désactiver un lien, mais une bonne méthode CSS qui fonctionne dans IE10 + et tous les nouveaux navigateurs:

.current-page {
  pointer-events: none;
  color: grey;
}
<a href="#" class="current-page">This link is disabled</a>

7
Alireza

J'ai cherché sur Internet et rien de mieux que this . En gros, pour désactiver la fonctionnalité de clic sur un bouton, ajoutez simplement un style CSS à l'aide de jQuery comme suit:

$("#myLink").css({ 'pointer-events': 'none' });

Ensuite, pour le réactiver, faites ceci

$("#myLink").css({ 'pointer-events': '' });

Vérifié sur Firefox et IE 11, cela a fonctionné.

5
Faisal Mq

Merci à tous ceux qui ont publié des solutions, j'ai combiné plusieurs approches pour fournir des fonctionnalités disabled plus avancées. Voici un Gist , et le code est ci-dessous.

This provides for multiple levels of defense so that Anchors marked as disable actually behave as such.
Using this approach, you get an anchor that you cannot:
  - click
  - tab to and hit return
  - tabbing to it will move focus to the next focusable element
  - it is aware if the anchor is subsequently enabled


1.  Include this css, as it is the first line of defense.  This assumes the selector you use is 'a.disabled'
    a.disabled {
      pointer-events: none;
      cursor: default;
    }

 2. Next, instantiate this class such as (with optional selector):
    $ ->
      new AnchorDisabler()

Voici la classe coffescript:

class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false
3
kross

vous pouvez utiliser ce css:

a.button,button {
    display: inline-block;
    padding: 6px 15px;
    margin: 5px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    -moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    -webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    box-shadow: inset 0 3px 20px 0 #cdcdcd;
}

a[disabled].button,button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
    -webkit-touch-callout: none;
}

a.button:active:not([disabled]),button:active:not([disabled]) {
    background-color: transparent !important;
    color: #2a2a2a !important;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}
<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>

3
javad shariaty

Démo ici
Essaye celui-là

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});
2
Suresh Pattu

J'ai utilisé:

.current-page a:hover {
pointer-events: none !important;
}

Et n'était pas assez; dans certains navigateurs, le lien était toujours affiché, clignotant.

Je devais ajouter:

.current-page a {
cursor: text !important;
}
2
Pablo Molina

Vous pouvez également dimensionner un autre élément pour qu'il recouvre les liens (en utilisant le bon index z): Cela "mange" les clics. 

(Nous avons découvert cela par accident, car nous avions un problème avec des liens soudainement inactifs en raison d'une conception "réactive", ce qui a permis à un H2 de les couvrir lorsque la fenêtre du navigateur était de la taille d'un mobile.)

1
Tor Iver Wilhelmsen

<a href="#!">1) Link With Non-directed url</a><br><br>

<a href="#!" disabled >2) Link With with disable url</a><br><br>

0
Rudra

C'est possible de le faire en CSS

.disabled{
  cursor:default;
  pointer-events:none;
  text-decoration:none;
  color:black;
}
<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

Voir à:

Notez que text-decoration: none; et color: black; ne sont pas nécessaires, mais le lien ressemble davantage à du texte brut.

0
user8903269

pointer-events:none désactive le lien:

.disabled {
       pointer-events:none;
}
<a href="#" class="disabled">link</a>
0
Nikki