Как включить выделение текста для дочерних вводов в Mozilla Firefox с помощью CSS?

Давайте рассмотрим следующий сценарий. У меня есть следующая страница, где все визуализированные элементы должны быть недоступны для выбора.

<html>
<head>
    <style type="text/css">
        body {
            -webkit-user-select: none;
            -moz-user-select: none;
        }
        div {
            border: solid 1px green;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
        nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
        vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
    </div>
    <div>
        <input type="text" value="You can select the text from me" />
        <textarea>
            And me too.
        </textarea>
    </div>
</body>
</html>

input а также textarea текст по-прежнему можно выбрать в Google Chrome, но текст нельзя выбрать в Firefox. Я уже пробовал следующее:

input, textarea {
    -moz-user-select: text !important;
}

И... Это просто не работает, потому что (насколько я вижу) input а также textarea вложены в элемент тела документа, который уже недоступен для выбора. Итак, возможно ли включить выбор текста вложенных элементов пользовательского ввода в Firefox с помощью CSS?

Спасибо за предложения.

1 ответ

Решение

Имеет:

    body {
        -webkit-user-select: none;
        -moz-user-select: -moz-none; /* changed from none to -moz-none */
    }
    input, textarea {
        -moz-user-select: text;
    }

Работа?

Смотрите эту страницу.

Другие вопросы по тегам