Discussion :

[Archimède]

Bonjour,
je m'exerce à la mise en page CSS puisque avant je faisais surtout de l'actionscript. Je commence à assez bien bricoler en javascript mais je suis plutôt mauvais en CSS par manque d'entraînement et de bonne volonté. (les soucis de portabilité d'un navigateur à l'autre me font regretter flashplayer...mais ça, c'est une autre histoire...)

Voilà, je me faisais un bouton à partir d'un div pour me faire un peu la main. Avec un dégradé sur le fond de mon div, le titre du bouton prend un fond blanc lorsqu'il réagit à un événement.
Comment éviter ce désagrément. J'avais déjà rencontré ce problème là, mais je ne sais plus comment je l'avais réglé.

Merci

https://jsfiddle.net/dy7h6vw9/1/

[ProgElecT]

Salut

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="cadrearrondi" onselectstart="return false">Button</div>

Il y a peut être moyen de le faire directement en CSS.

[Archimède]

Salut,

merci nickel

Rq: J'attends éventuellement une solution CSS pour fermer la discussion.

[Archimède]

Apparemment, une solution CSS serait :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
BODY{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

[Invité]

Bonjour,

1-

...le titre du bouton prend un fond blanc lorsqu'il réagit à un événement...

Merci de préciser sur quel navigateur.
Je n'ai rien constaté sur Firefox ou Edge.



(EDIT] Ah si ! Vu !
Mais c'est en double-cliquant : le texte se trouve sélectionné. Et donc prend un fond blanc.

Pour l'éviter :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#cadrearrondi::moz-selection {
  background:none;
}
#cadrearrondi::selection {
  background:none;
}

N.B. Il faut séparer les 2 (::moz-selection et ::selection)



2- au lieu de faire des fonctions JS (ou plutôt d'écrire le CSS dans le code JS), crée des classes CSS, que tu affiches/supprimes selon l'action.

• element.classList

• elt.classList.add()
• elt.classList.remove()

[Archimède]

Bonjour, pourtant c'était sous FF pour moi...
Merci pour le conseil n°2. Je potasse le contenu de ton lien sur les classes CSS.
A+