如何使用 CSS 在 Mozilla Firefox 中启用子输入文本选择？答案

【问题标题】：How can I enable child inputs text selection in Mozilla Firefox using CSS?如何使用 CSS 在 Mozilla Firefox 中启用子输入文本选择？
【发布时间】：2011-02-18 01:34:08
【问题描述】：

让我们考虑以下场景。我有以下页面，其中所有呈现的元素都必须是不可选择的。

<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 启用嵌套用户输入元素的文本选择？

感谢您的建议。

【问题讨论】：

标签： css firefox webkit gecko textselection

【解决方案1】：

做：

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

工作？

见this page。

【讨论】：

甚至更多：在这种情况下，input, textarea 规则是不必要的。不过，谢谢。 :)