Empêcher la surbrillance de CSS :: avant le contenu

Question

J'ai utilisé ::before pour mes listes ordonnées et non-ordonnées dans mon application, mais je trouve que mes listes ordonnées sont seulement surlignables, et que la couleur de surbrillance ne peut pas sembler être changée pour correspondre au reste de ma demande.

Ce que je voudrais est de désactiver la mise en évidence de ces éléments dans Webkit. Malheureusement, cela signifie que user-select n'est pas une option. Des pensées?

Le CSS pour le :: avant éléments HTML

ol li p:first-of-type::before { 
 
     content: counter(li) "."; 
 
     text-align: right !important; 
 
     width: 28px; 
 
     margin-right: 6px; 
 
     display: inline-block; 
 
     font-family: 'Droid Sans Mono'; 
 
     color: rgba(21, 95, 122, 0.8); 
 
     font-size: 13px; 
 
     letter-spacing: -1px; 
 
     margin-left: -4px; 
 
     font-weight: 700; 
 
     user-select: none; 
 
     line-height: 0px; 
 
     background: none !important; 
 
    } 
 

 
    ul li p:first-of-type::before { 
 
     content: "-"; 
 
     margin-top: -11px; 
 
     display: inline-block; 
 
     margin-left: 6px; 
 
     padding-right: 19px; 
 
     width: 1px; 
 
     /* float: left; */ 
 
     transform: scaleY(1.4); 
 
     font-size: 24px; 
 
     font-family: 'Droid Sans Mono'; 
 
     color: rgba(21, 95, 122, 0.7); 
 
     line-height: 0px; 
 
     user-select: none; 
 
     background: none !important; 
 
    }

<div data-slate-editor="true" contenteditable="true" autocorrect="true" spellcheck="true" style="outline: none; white-space: pre-wrap; word-wrap: break-word; -webkit-user-modify: read-write-plaintext-only;" role="textbox"> 
 
    <ol data-key="36"> 
 
     <li class="" title="" data-key="29"> 
 
     <p data-key="28"><span data-key="27"><span data-offset-key="27-0">Item</span></span></p> 
 
     </li> 
 
     <li class="" title="" data-key="32"> 
 
     <p data-key="31"><span data-key="30"><span data-offset-key="30-0">Item</span></span></p> 
 
     </li> 
 
     <li class="current-item" title="Current Item" data-key="35"> 
 
     <p data-key="34"><span data-key="33"><span data-offset-key="33-0">Item</span></span></p> 
 
     </li> 
 
    </ol> 
 
    <ul data-key="46"> 
 
     <li class="" title="" data-key="39"> 
 
     <p data-key="38"><span data-key="37"><span data-offset-key="37-0">Item</span></span></p> 
 
     </li> 
 
     <li class="" title="" data-key="42"> 
 
     <p data-key="41"><span data-key="40"><span data-offset-key="40-0">Item</span></span></p> 
 
     </li> 
 
     <li class="" title="" data-key="45"> 
 
     <p data-key="44"><span data-key="43"><span data-offset-key="43-0">Item</span></span></p> 
 
     </li> 
 
    </ul> 
 
    <p data-key="48"><span data-key="47"><span data-offset-key="47-0"><br></span></span></p> 
 
</div>

Answer 1

Ajouter une classe nommée list à tous dans la liste dans votre balise ol et le style comme suit

.list{ 
user-select:none; 
-moz-user-select:none; 
-webkit-user-select:none; 
-o-user-select:none; 
} 

Snippet ci-dessous

ol li p:first-of-type::before { 
 
    content: counter(li) "."; 
 
    text-align: right !important; 
 
    width: 28px; 
 
    margin-right: 6px; 
 
    display: inline-block; 
 
    font-family: 'Droid Sans Mono'; 
 
    color: rgba(21, 95, 122, 0.8); 
 
    font-size: 13px; 
 
    letter-spacing: -1px; 
 
    margin-left: -4px; 
 
    font-weight: 700; 
 
    user-select: none; 
 
    line-height: 0px; 
 
    background: none !important; 
 
} 
 

 
ul li p:first-of-type::before { 
 
    content: "-"; 
 
    margin-top: -11px; 
 
    display: inline-block; 
 
    margin-left: 6px; 
 
    padding-right: 19px; 
 
    width: 1px; 
 
    /* float: left; */ 
 
    transform: scaleY(1.4); 
 
    font-size: 24px; 
 
    font-family: 'Droid Sans Mono'; 
 
    color: rgba(21, 95, 122, 0.7); 
 
    line-height: 0px; 
 
    user-select: none; 
 
    background: none !important; 
 
} 
 
.list{ 
 
user-select:none; 
 
-moz-user-select:none; 
 
-webkit-user-select:none; 
 
-o-user-select:none; 
 
}

<div data-slate-editor="true" contenteditable="true" autocorrect="true" spellcheck="true" style="outline: none; white-space: pre-wrap; word-wrap: break-word; -webkit-user-modify: read-write-plaintext-only;" role="textbox"> 
 
    <ol data-key="36"> 
 
     <li class="list" title="" data-key="29"> 
 
     <p data-key="28"><span data-key="27"><span data-offset-key="27-0">Item</span></span></p> 
 
     </li> 
 
     <li class="list" title="" data-key="32"> 
 
     <p data-key="31"><span data-key="30"><span data-offset-key="30-0">Item</span></span></p> 
 
     </li> 
 
     <li class="current-item" title="Current Item" data-key="35"> 
 
     <p data-key="34"><span data-key="33"><span data-offset-key="33-0">Item</span></span></p> 
 
     </li> 
 
    </ol> 
 
    <ul data-key="46"> 
 
     <li class="" title="" data-key="39"> 
 
     <p data-key="38"><span data-key="37"><span data-offset-key="37-0">Item</span></span></p> 
 
     </li> 
 
     <li class="list" title="" data-key="42"> 
 
     <p data-key="41"><span data-key="40"><span data-offset-key="40-0">Item</span></span></p> 
 
     </li> 
 
     <li class="list" title="" data-key="45"> 
 
     <p data-key="44"><span data-key="43"><span data-offset-key="43-0">Item</span></span></p> 
 
     </li> 
 
    </ul> 
 
    <p data-key="48"><span data-key="47"><span data-offset-key="47-0"><br></span></span></p> 
 
</div>

Alternative deux (semble bien fonctionner en chrome)

ajoutez la propriété suivante au porte-conteneur div toutes les listes ul et ol

unselectable='on' onselectstart='return false;' onmousedown='return false;' 

Snippet ci-dessous

ol li p:first-of-type::before { 
 
    content: counter(li) "."; 
 
    text-align: right !important; 
 
    width: 28px; 
 
    margin-right: 6px; 
 
    display: inline-block; 
 
    font-family: 'Droid Sans Mono'; 
 
    color: rgba(21, 95, 122, 0.8); 
 
    font-size: 13px; 
 
    letter-spacing: -1px; 
 
    margin-left: -4px; 
 
    font-weight: 700; 
 
    user-select: none; 
 
    line-height: 0px; 
 
    background: none !important; 
 
} 
 

 
ul li p:first-of-type::before { 
 
    content: "-"; 
 
    margin-top: -11px; 
 
    display: inline-block; 
 
    margin-left: 6px; 
 
    padding-right: 19px; 
 
    width: 1px; 
 
    /* float: left; */ 
 
    transform: scaleY(1.4); 
 
    font-size: 24px; 
 
    font-family: 'Droid Sans Mono'; 
 
    color: rgba(21, 95, 122, 0.7); 
 
    line-height: 0px; 
 
    user-select: none; 
 
    background: none !important; 
 
} 
 
.list{ 
 
user-select:none !important; 
 
-moz-user-select:none !important; 
 
-webkit-user-select:none !important; 
 
-o-user-select:none !important; 
 
} 
 
ol{ 
 
user-select:none !important; 
 
-moz-user-select:none !important; 
 
-webkit-user-select:none !important; 
 
-o-user-select:none !important; 
 
}

<div data-slate-editor="true" contenteditable="true" autocorrect="true" spellcheck="true" style="outline: none; white-space: pre-wrap; word-wrap: break-word; -webkit-user-modify: read-write-plaintext-only;" role="textbox" unselectable='on' onselectstart='return false;' onmousedown='return false;'> 
 
    <ol data-key="36"> 
 
     <li class="list" title="" data-key="29" unselectable='on' onselectstart='return false;' onmousedown='return false;'> 
 
     <p data-key="28"><span data-key="27"><span data-offset-key="27-0">Item</span></span></p> 
 
     </li> 
 
     <li class="list" title="" data-key="32"> 
 
     <p data-key="31"><span data-key="30"><span data-offset-key="30-0">Item</span></span></p> 
 
     </li> 
 
     <li class="current-item" title="Current Item" data-key="35"> 
 
     <p data-key="34"><span data-key="33"><span data-offset-key="33-0">Item</span></span></p> 
 
     </li> 
 
    </ol> 
 
    <ul data-key="46"> 
 
     <li class="" title="" data-key="39"> 
 
     <p data-key="38"><span data-key="37"><span data-offset-key="37-0">Item</span></span></p> 
 
     </li> 
 
     <li class="list" title="" data-key="42"> 
 
     <p data-key="41"><span data-key="40"><span data-offset-key="40-0">Item</span></span></p> 
 
     </li> 
 
     <li class="list" title="" data-key="45"> 
 
     <p data-key="44"><span data-key="43"><span data-offset-key="43-0">Item</span></span></p> 
 
     </li> 
 
    </ul> 
 
    <p data-key="48"><span data-key="47"><span data-offset-key="47-0"><br></span></span></p> 
 
</div>