Как отключить подсветку выделения текста?

Question

Для якорей, которые действуют как кнопки (например, Вопросы , Теги , Пользователи и т. Д. В верхней части страницы переполнения стека) или вкладок , есть ли в CSS стандартный способ отключить эффект выделения, если пользователь случайно выделил текст?

Я понимаю, что это можно сделать с помощью JavaScript, и немного прибегнув к поиску, можно было получить только Mozilla -moz-user-select.

Существует ли совместимый со стандартами способ сделать это с помощью CSS, и если нет, то каков подход "наилучшей практики"?

Answer 1

Попробуйте использовать это:

::selection {
    background: transparent;
}

И если вы хотите указать, что нет выбора внутри определенного элемента, просто поместите класс или идентификатор элемента перед правилом выбора, например:

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}

Answer 2

Этот эффект выделения вызван действием hover (onMouseHover). При наведении на любую вкладку ее цвет будет изменен. Просто скажи, к примеру.

<div class="menu">
 <ul class="effect">
   <li>Questions </li>
   <li>JOBS </li>
   <li>Users</li>
 </ul>
</div>

<!-- CSS CODE -->

.effect:hover{
   color: none;
}

Вы можете дать любой цвет, если хотите выделить его, иначе вы не можете дать ни одного.

Answer 3

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

Answer 4

Если вы хотите отключить выделение и выделение для всей страницы, вы можете легко сделать это с помощью CSS:

* {
    -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 */
  }

Answer 5

Вы можете использовать свойство User-select, как показано ниже для этого ..

p {  
     -webkit-user-select: none;  /* Chrome all / Safari all */
     -moz-user-select: none;     /* Firefox all */
     -ms-user-select: none;      /* IE 10+ */
      user-select: none;          /* Likely future */             
   }

Ссылка для подробного описания

Answer 6

с CSS-

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

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

<div>
  Blabla
  <br/> More Blabla
  <br/> More Blabla...
</div>

Answer 7

Я объединил различные атрибуты выбора CSS браузера с невыбираемым тегом, необходимым для Internet Explorer <9. </p>

<style>
[unselectable="on"] {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer 10+/Edge */
    user-select: none; /* Standard */
}
</style>
<div unselectable="on">Unselectable Text</div>

Answer 8

Еще лучше, вы можете отключить выделение текста.

Если вам нравится SASS (SCSS) и вы не хотите использовать компас, вы можете сделать это:

styles.scss

@mixin user-select($select) {
  -webkit-touch-callout:#{$select};
  @each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
  #{$pre + user-select}: #{$select};
  }
  #{user-select}: #{$select};
}

.no-select {
  @include user-select(none);
}

Answer 9

Может быть, вы можете использовать это решение до:

nav li {
	display: inline-block;
	position: relative;
}

nav li a {
	display: inline-block;
	padding: 10px 20px;
}

nav li a:hover {
	color: red;
}

nav li.disabled:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

<nav>
	<ul>
	<li><a href="#">Link</a></li>
	<li class="disabled"><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	</ul>
</nav>

JsFiddle - https://jsfiddle.net/grinmax_/9L1cckxu/

Answer 10

::selection {background: transparent; color: transparent;}

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