පෙළ තේරීම ඉස්මතු කිරීම අක්‍රීය කරන්නේ කෙසේද

බොත්තම් මෙන් ක්‍රියා කරන නැංගුරම් සඳහා (උදාහරණයක් ලෙස ප්‍රශ්න , ටැග් ස්ටක් පිටාර ගැලීම් පිටුවේ ඉහළින් ඇති , පරිශීලකයින් යනාදිය) හෝ ටැබ් සඳහා, පරිශීලකයා අහම්බෙන් පෙළ තෝරා ගන්නේ නම් උද්දීපනය කිරීමේ බලපෑම අක්‍රිය කිරීමට CSS සම්මත ක්‍රමයක් තිබේද?

මෙය ජාවාස්ක්‍රිප්ට් සමඟ කළ හැකි බව මට වැටහී ඇති අතර කුඩා ගොග්ලිං මඟින් මොසිල්ලා පමණක් ලබා දී ඇත -moz-user-select විකල්පය ලබා දී ඇත.

CSS සමඟ මෙය සාක්ෂාත් කර ගැනීම සඳහා සම්මත අනුකූල ක්‍රමයක් තිබේද, එසේ නොවේ නම්, “හොඳම පුහුණුවීම්” ප්‍රවේශය කුමක්ද?

2017 ජනවාරි යාවත්කාලීන කරන්න:

Can I use ට අනුව , user-selectඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9 සහ ඊට පෙර අනුවාදයන් හැර අනෙකුත් සියලුම බ්‍රව්සර්වල දැනට සහය දක්වයි (නමුත් කනගාටුවට කරුණක් නම් තවමත් විකුණුම් උපසර්ගයක් අවශ්‍ය වේ).

සියලුම නිවැරදි CSS වෙනස්කම්:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

user-selectප්‍රමිතිකරණ ක්‍රියාවලියේ පවතින බව සලකන්න (දැනට W3C වැඩ කරන කෙටුම්පතක ). සෑම තැනකම වැඩ කිරීම සහතික කර නොමැති අතර, බ්‍රව්සර් අතර ක්‍රියාත්මක කිරීමේ වෙනස්කම් තිබිය හැකි අතර අනාගතයේදී බ්‍රව්සර් සඳහා ඒ සඳහා සහාය ලබා දිය හැකිය.

වැඩි විස්තර මොසිල්ලා සංවර්ධක ජාල ප්‍රලේඛනයෙන් සොයාගත හැකිය .

බොහෝ බ්‍රව්සර් වලදී, සීඑස්එස් user-selectදේපලෙහි හිමිකාර වෙනස්කම් භාවිතා කරමින් මෙය සාක්ෂාත් කරගත හැකි අතර , මුලින් යෝජනා කර පසුව CSS 3 හි අතහැර දමා දැන් CSS UI මට්ටම 4 හි යෝජනා කර ඇත :

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් <10 සහ ඔපෙරා <15 සඳහා, ඔබ unselectableතෝරා නොගත යුතු මූලද්‍රව්‍යයේ ගුණාංගය භාවිතා කිරීමට අවශ්‍ය වනු ඇත. HTML හි ඇති ගුණාංගයක් භාවිතයෙන් ඔබට මෙය සැකසිය හැකිය:

<div id="foo" unselectable="on" class="unselectable">...</div>

කනගාටුවට කරුණක් නම් මෙම දේපල උරුම නොවීමයි, එයින් අදහස් වන්නේ ඔබ තුළ ඇති සෑම මූලද්‍රව්‍යයකම ආරම්භක ටැගය තුළ ලක්ෂණයක් තැබිය යුතු බවයි <div>. මෙය ගැටළුවක් නම්, ඔබට ඒ වෙනුවට ජාවාස්ක්‍රිප්ට් භාවිතා කර මූලද්‍රව්‍යයෙන් පැවත එන්නන් සඳහා පුනරාවර්තන ලෙස මෙය කළ හැකිය:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

යාවත්කාලීන කිරීම 2014 අප්‍රියෙල් 30 : ගසට නව මූලද්‍රව්‍යයක් එකතු කළ සෑම අවස්ථාවකම මෙම ගස් ගමන් කිරීම නැවත ක්‍රියාත්මක කළ යුතුය, නමුත් an හෑන් විසින් කරන ලද ප්‍රකාශයකින් පෙනී යන්නේ ඉලක්කයේ ඉලක්කය mousedownසකසන සිදුවීම් හසුරුවන්නෙකු එකතු කිරීමෙන් මෙය වළක්වා ගත හැකි බවයි unselectable. සිද්ධිය. වැඩි විස්තර සඳහා http://jsbin.com/yagekiji/1 බලන්න.

මෙය තවමත් සියලු හැකියාවන් ආවරණය නොකරයි. තෝරා නොගත හැකි මූලද්‍රව්‍ය වලින් තෝරා ගැනීම ආරම්භ කළ නොහැකි අතර, සමහර බ්‍රව්සර්වල (උදාහරණයක් ලෙස ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් සහ ෆයර්ෆොක්ස්), සම්පූර්ණ ලේඛනයම තෝරා නොගත හැකි ලෙස තෝරා නොගත හැකි මූලද්‍රව්‍යයට පෙර ආරම්භ වී අවසන් වන තේරීම් වලක්වා ගත නොහැක.

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් සඳහා ජාවාස්ක්‍රිප්ට් විසඳුමක්:

onselectstart="return false;"

CSS 3 හි පරිශීලක-තෝරාගත් දේපල ලබා ගන්නා තෙක් , ඔබ දැනටමත් සොයාගෙන ඇති දේපල සඳහා Gecko- පදනම් වූ බ්‍රව්සර් සහාය දක්වයි -moz-user-select. වෙබ්කිට් සහ බ්ලින්ක් මත පදනම් වූ බ්‍රව්සර් -webkit-user-selectදේපල සඳහා සහය දක්වයි .

Gecko විදැහුම්කරණ එන්ජිම භාවිතා නොකරන බ්‍රව්සර් වල මෙය ඇත්ත වශයෙන්ම සහය නොදක්වයි.

එය කිරීමට "ප්‍රමිති" අනුකූල ඉක්මන් හා පහසු ක්‍රමයක් නොමැත; JavaScript භාවිතා කිරීම විකල්පයකි.

ඇත්තම ප්‍රශ්නය නම්, පරිශීලකයන්ට උද්දීපනය කිරීමට නොහැකි වීමටත්, සමහර අංග පිටපත් කර ඇලවීමටත් ඔබට අවශ්‍ය ඇයි? මගේ වෙබ් අඩවියේ යම් කොටසක් ඉස්මතු කිරීමට පරිශීලකයින්ට ඉඩ නොදීමට මට එක වරක්වත් හමු වී නැත. මගේ මිතුරන් කිහිප දෙනෙක්, පැය ගණනක් කේත කියවීම සහ ලිවීමෙන් පසු ඔවුන් ඉස්මතු වූ අංගය ඔවුන් සිටි පිටුවේ කොතැනදැයි මතක තබා ගැනීමට හෝ සලකුණු ලබා දීමෙන් ඔවුන්ගේ ඇස් ඊළඟට බැලීමට කොතැනදැයි දැන ගනු ඇත.

මෙය ප්‍රයෝජනවත් යැයි මට පෙනෙන එකම ස්ථානය නම්, ඔබ විසින් පිටපත් නොකළ යුතු පෝරම සඳහා බොත්තම් තිබේ නම් සහ පරිශීලකයෙකු වෙබ් අඩවිය පිටපත් කර අලවා තිබේ නම්.

ඔබට <p>මූලද්‍රව්‍ය හැර සෑම දෙයකම පෙළ තේරීම අක්‍රිය කිරීමට අවශ්‍ය නම් , ඔබට මෙය CSS හි කළ හැකිය ( -moz-noneඋප මූලද්‍රව්‍ය අභිබවා යාමට ඉඩ සලසන, වෙනත් බ්‍රව්සර්වල අවසර දී ඇති දේ ගැන විමසිල්ලෙන් සිටින්න none):

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

පෙර පිළිතුරු වල විසඳුම් තුළ තේරීම නවතා ඇත, නමුත් කර්සරය තවමත් වෙනස් වන නිසා ඔබට පෙළ තෝරා ගත හැකි බව පරිශීලකයා තවමත් සිතයි. එය ස්ථිතිකව තබා ගැනීමට, ඔබට ඔබේ CSS කර්සරය සැකසිය යුතුය:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

මෙය ඩෙස්ක්ටොප් යෙදුමක මෙන් ඔබේ පෙළ මුළුමනින්ම සමතලා කරනු ඇත.

ඔබට එය ෆයර්ෆොක්ස් සහ සෆාරි වලින් කළ හැකිය (ක්‍රෝම් ද?)

::selection { background: transparent; }
::-moz-selection { background: transparent; }

සඳහා සලසන වක් මගක් WebKit පිරිසැලසුම් :

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

මම එය කාඩ්ෆ්ලිප් උදාහරණයකින් සොයාගත්තා.

මම දෙමුහුන් CSS + jQuery විසඳුමට කැමතියි.

ඇතුළත ඇති සියලුම අංග <div class="draggable"></div>තෝරාගත නොහැකි කිරීමට, මෙම CSS භාවිතා කරන්න:

.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.draggable input {
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
         -o-user-select: text;
            user-select: text;
 }

ඉන්පසු, ඔබ jQuery භාවිතා කරන්නේ නම්, මෙය $(document).ready()බ්ලොක් එකක් තුළ එක් කරන්න :

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

ඕනෑම ආදාන අංග අන්තර්ක්‍රියාකාරී වීමට ඔබට තවමත් අවශ්‍ය බව මම සිතමි, එබැවින් :not()ව්‍යාජ තේරීම් කාරකය. ඔබට භාවිතා කළ හැකිය'*' ගන්නේ නැතිනම් ඔබට ඒ වෙනුවට .

Caveat: Internet Explorer 9 ට මෙම අමතර jQuery කෑල්ල අවශ්‍ය නොවනු ඇත, එබැවින් ඔබට එහි අනුවාද චෙක්පතක් එක් කිරීමට අවශ්‍ය විය හැකිය.

.hidden:after {
    content: attr(data-txt);
}

<p class="hidden" data-txt="Some text you don't want to be selected"></p>

එය හොඳම ක්‍රමය නොවේ.

ඒ සඳහා ඔබට CSS හෝ JavaScript භාවිතා කළ හැකිය .

මෙම JavaScript ආකාරයෙන් සහාය පැරණි වැනි බ්රවුසර, පැරණි මෙන්ම Internet Explorer හි සංස්කරණ, නමුත් එය ඔබගේ නඩුව නොවේ නම්, CSS ක්රමය නම් භාවිතා කරන්න:

HTML / JavaScript:

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML / CSS:

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් සඳහා, ඔබ ව්‍යාජ පන්තියක්focus එක් කළ යුතුය (. ක්ලාස් නම: අවධානය) සහ outline-style: none.

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none; /* Internet Explorer  */
}

මෙම පේළි CSS තුළට ඇතුළු කිරීමට උත්සාහ කර පන්ති දේපලෙහි "disHighlight" අමතන්න:

.disHighlight {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}

ඉක්මන් වැටෙයි යාවත්කාලීන කිරීම

ඔබ noneසියලු CSS user-selectගුණාංග සඳහා අගය භාවිතා කරන්නේ නම් (එහි බ්‍රව්සර් උපසර්ග ඇතුළුව), මෙය තවමත් සිදුවිය හැකි ගැටළුවක් ඇත.

.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* Internet Explorer  10+  */
     user-select: none;        /* Likely future           */
}

ලෙස CSS-ප්රජාතන්ත්රවාදය නොරැකි ජවිපෙ පවසයි එම ප්රශ්නය වන්නේ:

ඔබ වටා ඇති අංග තෝරා ගන්නේ නම්, වෙබ්කිට් තවමත් පෙළ පිටපත් කිරීමට ඉඩ දෙයි.

enforceසම්පූර්ණ මූලද්‍රව්‍යයක් තෝරා ගැනීමට ඔබට පහත එක භාවිතා කළ හැකිය, එයින් අදහස් වන්නේ ඔබ මූලද්‍රව්‍යයක් මත ක්ලික් කළහොත්, එම මූලද්‍රව්‍යයේ ඔතා ඇති සියලුම පෙළ තෝරා ගනු ලැබේ. මේ සඳහා ඔබ කළ යුත්තේ වටිනාකම වෙනස් noneකිරීමයි all.

.force-select {
    -webkit-user-select: all;  /* Chrome 49+     */
    -moz-user-select: all;     /* Firefox 43+    */
    -ms-user-select: all;      /* No support yet */
    user-select: all;          /* Likely future  */
}

ස්පර්ශ සිදුවීම සමඟ ඇන්ඩ්‍රොයිඩ් බ්‍රව්සරයේ එය සාක්ෂාත් කර ගැනීමේ අපහසුතා ඇති අය සඳහා, භාවිතා කරන්න:

html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

ඔබ අඩු සහ බූට්ස්ට්‍රැප් භාවිතා කරන්නේ නම් ඔබට ලිවිය හැකිය:

.user-select(none);

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

<div id="foo" unselectable="on" class="unselectable">...</div>

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

-webkit-user-select: none;
-moz-user-select: none;

onselectstart="return false;"

::selection { 
    background: transparent; 
}

::-moz-selection { 
    background: transparent; 
}

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

<div class="draggable"></div>

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

.draggable input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
 }

if ($.browser.msie)
    $('.draggable').find(':not(input)').attr('unselectable', 'on');

වැඩ

CSS:

-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;

මෙය ක්‍රියාත්මක විය යුතුය, නමුත් එය පැරණි බ්‍රව්සර් සඳහා ක්‍රියා නොකරනු ඇත. බ්‍රව්සර් අනුකූලතා ගැටලුවක් තිබේ.

SASS සමඟ (SCSS syntax)

ඔබට මෙය මික්සින් සමඟ කළ හැකිය :

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

HTML ටැගයක:

<div class="no-selectable">TRY TO HIGHLIGHT</div>

මෙම කෝඩ්පෙන් තුළ එය උත්සාහ කරන්න .

ඔබ ඔටෝප්‍රෙෆික්සර් භාවිතා කරන්නේ නම් ඔබට වෙනත් උපසර්ග ඉවත් කළ හැකිය.

බ්‍රව්සර් අනුකූලතාව මෙහි ඇත.

මොසිල්ලා පමණක් දේපල හැරුණු විට, නැත, සම්මත CSS සමඟ පෙළ තේරීම අක්‍රීය කිරීමට ක්‍රමයක් නොමැත (දැනට පවතින පරිදි).

ඔබ දුටුවහොත්, ස්ටැක් පිටාර ගැලීම ඔවුන්ගේ සංචාලන බොත්තම් සඳහා පෙළ තේරීම අක්‍රීය නොකරන අතර, සාමාන්‍ය තේරීම් හැසිරීම වෙනස් කරන අතර එය පරිශීලකයාගේ අපේක්ෂාවන් සමඟ ගැටෙන බැවින් බොහෝ අවස්ථාවලදී එසේ කිරීමට මම නිර්දේශ කරමි.

මෙය සමහර බ්‍රව්සර් වල ක්‍රියාත්මක වේ:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

හිස් අවකාශයකින් තොරව කොමාවකින් වෙන් කර ඇති තේරීම්කරුවන් ඉදිරිපිට ඔබේ අපේක්ෂිත අංග / අයිඩී එකතු කරන්න, වැනි:

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

අනෙක් පිළිතුරු වඩා හොඳ ය; මෙය බොහෝ විට අවසාන උත්සාහය / කැචල් ලෙස දැකිය යුතුය.

divමේ වගේ s දෙකක් ඇතැයි සිතමු :

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}

<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

කර්සරය පෙරනිමියට සකසන්න එවිට එය පරිශීලකයාට තෝරා නොගත හැකි හැඟීමක් ලබා දෙනු ඇත.

සියලුම බ්‍රව්සර්වල එයට සහය දැක්වීමට උපසර්ගය භාවිතා කළ යුතුය. උපසර්ගයක් නොමැතිව මෙය සියලු පිළිතුරු වල ක්‍රියා නොකරනු ඇත.

වර්ණ තේරීම ද අවශ්‍ය නොවේ නම් මෙය ප්‍රයෝජනවත් වනු ඇත:

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

... අනෙක් සියලුම බ්‍රව්සර නිවැරදි කිරීම්. එය ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9 හෝ ඊට පසුව ක්‍රියා කරනු ඇත.

පෙළ සඳහා තේරීම අක්‍රිය කිරීමට අවශ්‍ය පළමු කොටසට මෙය එක් කරන්න:

onmousedown='return false;' 
onselectstart='return false;'

සටහන:

නිවැරදි පිළිතුර නිවැරදි බැවින් එය පෙළ තෝරා ගැනීමට නොහැකි වීම වළක්වයි. කෙසේ වෙතත්, ඊළඟ තිරපිටපත් දෙක සමඟ මම පෙන්වන පරිදි (2014 නොවැම්බර් 7 වන විට) පෙළ පිටපත් කිරීමට එය ඔබට බාධාවක් නොවේ.

ඔබට පෙනෙන පරිදි, අපට සංඛ්‍යා තෝරා ගැනීමට නොහැකි විය, නමුත් අපට ඒවා පිටපත් කිරීමට හැකි විය.

පරීක්ෂා කර ඇත්තේ: උබුන්ටු , ගූගල් ක්‍රෝම් 38.0.2125.111.

මට අවශ්ය ප්රතිඵලය ලබා ගැනීම සඳහා, මම යන දෙකම භාවිතා කිරීමට සිදු සොයා ::selectionහාuser-select

input.no-select:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.no-select::selection {
    background: transparent;
}

input.no-select::-moz-selection {
    background: transparent;
}

එය පහසුවෙන් කළ හැක්කේ:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

විකල්පයක් ලෙස:

අපි ඔබට කියමු <h1 id="example">Hello, World!</h1>. ඔබට එහි අභ්‍යන්තර HTML ඉවත් කිරීමට සිදුවනු ඇත h1, මේ අවස්ථාවේ දී හෙලෝ, වර්ල්ඩ් . එවිට ඔබට CSS වෙත ගොස් මෙය කිරීමට සිදුවේ:

#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.

    display: block; // To make sure it works fine in every browser.
}

දැන් එය හුදෙක් සිතන්නේ එය බ්ලොක්-මූලද්‍රව්‍යයක් මිස පෙළ නොවේ.

මෙය CSS නොවේ, නමුත් එය සඳහන් කිරීම වටී:

jQuery UI තේරීම අක්‍රීය කරන්න :

$("your.selector").disableSelection();

ජාවාස්ක්‍රිප්ට් නොමැතිව මගේ විසඳුම පරීක්ෂා කරන්න:

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}

<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

මගේ තාක්ෂණය සමඟ උත්පතන මෙනුව යොදන ලදි: http://jsfiddle.net/y4Lac/2/

මෙම ව්‍යාජ මූලද්‍රව්‍යය CSS තේරීම් 3 වන මට්ටමේ කෙටුම්පත් වල පැවතුනද, අපේක්ෂක නිර්දේශ අවධියේදී එය ඉවත් කරන ලදි, මන්දයත් එහි හැසිරීම නිශ්චිතව දක්වා නොමැති බව පෙනේ, විශේෂයෙන් කැදැලි සහිත මූලද්‍රව්‍ය සමඟ වන අතර අන්තර් ක්‍රියාකාරිත්වය අත්කර ගැනීමට නොහැකි විය.

එය සාකච්ඡා කරන්නේ කෙසේද :: තෝරාගැනීම කැදැලි මූලද්‍රව්‍ය මත ක්‍රියා කරයි .

එය බ්‍රව්සර් තුළ ක්‍රියාත්මක වුවද, ටැබ් සැලසුමට අනුව (ඔබේ නඩුවේදී) තෝරාගැනීමේදී එකම වර්ණය හා පසුබිම් වර්ණය භාවිතා කිරීමෙන් පෙළ තෝරා නොගැනීම පිළිබඳ මිත්‍යාවක් ඔබට කළ හැකිය.

සාමාන්‍ය CSS නිර්මාණය

p { color: white;  background: black; }

තෝරාගැනීමේදී

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

පා select ය තෝරා ගැනීමට පරිශීලකයින්ට ඉඩ නොදීමෙන් භාවිතයේ ගැටළු මතු වේ.