Как убрать эффект выделения текста в ссылке?

Question

[Ingernirated]

Всем привет!
Из-за чего здесь появился эффект возможности выделения текста у 2 и 3 элемента, если перед ними слева окажется курсор?
Как этого избежать не трогая отступы?
https://jsfiddle.net/hcpozves/

Answer 1

[Александр Логинов-Солоницын]

Просто добавь вот такие правила.

.menu {
  user-select: none;
}

Главное помнить, что user-select: none; не следует прописывать для input и textarea, так как на маках в них невозможно будет печатать текст.

Я в своих проектах использую вот такой Stylus миксин

$selection-none()
    &
        -webkit-user-select none
        -moz-user-select none
        -ms-user-select none
        user-select none
    input
    textarea
        -moz-user-select all !important
        -webkit-user-select: all !important
        -ms-user-select: all !important
        user-select: all !important

Comments

[Ingernirated]

спасибо!

[Александр Логинов-Солоницын]

Ingernirated, да не за что! Пол года назад это стоило мне одного миллиона нервных клеток ))

[Сергей Горячев]

Александр Логинов-Солоницын, про инпуты и текстареа я когда то тоже намучился, хорошее дополнение)

Answer 2

[Сергей Горячев]

Запретить выделение совсем

.menu {
  user-select: none;
}

либо сделать меню на флексах

.menu {
  display: flex;
  flex-direction: row;
}

либо тупо написать в одну строку

<a class="text">портфолио</a><a class="text">цены</a><a class="text">контакты</a>

Пробелы появляются между инлайновыми элементами.