AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
Pokémon Évolutions Prismatiques : coffrets et dates de sortie de ...
Voir le deal

    Changer la couleur de sélection (surlignement d'un texte)

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Lun 1 Avr 2013 - 17:41


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    Lorsque vous êtes sur une page internet et que vous surlignez un texte, un fond de couleur par défaut apparait et ça fait très Pokémon dit comme ça, mais bref. Par exemple, sur une page classique, si je surligne avec ma souris une partie de texte, il s'affiche comme ceci :

    Changer la couleur de sélection (surlignement d'un texte) JgDgEmQ

    Mais la couleur de fond et le changement de couleur de police peuvent être modifiés. Par exemple, sur N-U actuellement avec un thème très bleu, si vous surlignez un texte vous devez avoir un fond bleu et le texte presque blanc, comme ceci :

    Changer la couleur de sélection (surlignement d'un texte) WzXKnUK

    Pour faire cela, il vous suffit de mettre dans votre css le code suivant :

    Code:
    ::selection
    {
      background: #ffffff none repeat scroll 0 0;
      color: #000000;
      text-shadow: none;
    }
    ::-moz-selection
    {
      background: #ffffff none repeat scroll 0 0;
      color: #000000;
      text-shadow: none;
    }

    Dans le code la couleur de fond est le blanc (#ffffff) et la couleur de texte le noir (#000000), vous pouvez ainsi harmoniser le surlignement à votre couleur dominante de page.
    Ce code ne fonctionne peut-être pas avec certains navigateurs, notamment leur version plus ancienne.

    Dans le code présent j'ai précisé un "text-shadow: none" ce qui signifie que les ombres de texte, s'il y'en a, seront enlevées. En effet, ces ombres rendent souvent le surlignement illisible.



    sign
    Esther Amyko
    Esther Amyko
    FémininAge : 24Messages : 42

    Lun 8 Avr 2013 - 17:13

    Merci =D


    EDIT : Je crois qu'il y a un problème quelque part x( Au lieu de changer les couleurs, ça m'empêche carrément de surligner :/



    Changer la couleur de sélection (surlignement d'un texte) Signa_10
    Ayael
    Ayael
    FémininAge : 29Messages : 598

    Dim 21 Avr 2013 - 16:46

    moi ça marche très bien! Merci capitaine !
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Lun 22 Avr 2013 - 11:45

    Esther : tu es sous quel navigateur ? est-ce que tu vois le surlignement comme il faut sur N-U ? Tu as mis une couleur de fond et de texte différentes ?



    sign
    CN.June
    CN.June
    FémininAge : 25Messages : 315

    Jeu 6 Juil 2017 - 19:36

    On n'y pense pas souvent, pourtant c'est tellement pratique pour l'adapter aux thèmes !
    Merci beaucoup cap'tain Very Happy
    Anonymous
    Invité

    Jeu 6 Juil 2017 - 21:27

    Merci pour le partage !
    Mystborn
    Mystborn
    FémininAge : 25Messages : 89

    Sam 23 Avr 2022 - 20:40

    Merci pour ce code ! Le bleu c'est bien, mais ça faisait bizarre chez moi xD



    Changer la couleur de sélection (surlignement d'un texte) Mystbo10
    Tepemkau
    Tepemkau
    FémininAge : 32Messages : 25

    Mer 14 Sep 2022 - 23:18

    Excellent, c'est tellement plus esthétique ! Merci beaucoup :heart: :heart:
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 10:44