Как лучше полностью убрать select text?

Question

[tendkuh]

Если не нужно чтобы текст выделялся, то как лучше всего это сделать, нашёл способ (одноимённый псевдоэлемент), но он не подходит, так как выделение всё равно происходит, но остаётся прозрачным:

&::selection {
background: transparent;
}

Answer 1

[Rustam Bainazarov]

То же самое, что и здесь:
При нажатии кнопки выделяется текст?

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

Comments

[hzzzzl]

вот вообще никогда это свойство у меня не работало
хз, может дополнения браузера или еще что

[Rustam Bainazarov]

hzzzzl, какой браузер и его версия?

[hzzzzl]

Рустам Байназаров, хромы за последние года два лол
причем не только мышкой, но даже на ctrl+a выделяются обе кнопки

[Rustam Bainazarov]

hzzzzl, что-то не то совсем. Работает отлично. Но у меня никаких дополнений не стоит и никогда не стояло.

[Rustam Bainazarov]

hzzzzl, проверил на MacOS и Windows 7 в Chrome 74.

[Rustam Bainazarov]

hzzzzl, в Android Chrome 74 и iOS Safari 12 тоже не выделяет.

Какие дополнения стоят? :))

[hzzzzl]

Рустам Байназаров, а вообще да, это дополнение
https://chrome.google.com/webstore/detail/select-l...

видимо и поставил потому что хочу везде всё мочь выделить :D
но оке, хорошо что разобрались, я как-то уже думал что цсс свойство так себе поддерживается

[Rustam Bainazarov]

hzzzzl, да нет, свойство даже в IE11 работает. Слава богу, я тоже начал задумываться.

[Глюкъ Виртуален]

macOS 12, Chrome 120 — не работает

[Rustam Bainazarov]

Глюкъ Виртуален, не могу сказать про MacOS 12, на последней работает, как и на всех предыдущих до этого.

Проверьте расширения, либо это какой-то единичный баг. Попробуйте в сборке Canary проверить, например, либо же запустить Chrome без всех дополнений.

[Глюкъ Виртуален]

Rustam Bainazarov, очень рад за вас

[Rustam Bainazarov]

Глюкъ Виртуален, а я за вас, получается, не очень. Выделяет ли текст тут? https://jsfiddle.net/toraf3zq/

[Глюкъ Виртуален]

Rustam Bainazarov, в вашем примере просто текст в диве и решение этого вопроса знают все.
Моя кнопка со скриншота — это инпут и слова "следующий вопрос" на скриншоте это его value.

[Rustam Bainazarov]

Глюкъ Виртуален, с этого нужно было начинать, а не писать, что не работает, потому что это свойство CSS, согласно его спецификации, не предназначено для input'ов, там shadow DOM внутри.

[Глюкъ Виртуален]

Rustam Bainazarov, т.е. сперва поумничал, затем обнаружил что топил за дурацкое решение, а затем обвинил всех во всём.
Молодец КУРАТОР.

[Rustam Bainazarov]

Глюкъ Виртуален, умничаете и переходите на личности здесь только вы, не предоставив полной информации и сделав утвержение, что свойство не работает.

Что насчёт дурацких решений — это использовать элемент для ввода данных <input> для функции <button>, если судить по скриншоту. Выстрелили себе в ногу, так никто не делает, замените на <button>, и всё заработает.

[Rustam Bainazarov]

Глюкъ Виртуален, но если кому-то ещё понадобится такой неоправданный костыль для <input>, то так и только для десктопа. Фунционал ввода данных при этом, разумеется, не будет работать, но это контролируется атрибутом readonly. Повторюсь: так делать кнопки нельзя.