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

时间:2010-05-11 09:35:36

标签: css firefox webkit gecko textselection

让我们考虑以下场景。我有以下页面,其中所有渲染元素必须是不可选择的。

<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>

Google Chrome中仍然可以选择inputtextarea文字,但在Firefox中无法选择该文字。我已经尝试了以下内容:

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

并且......它根本不起作用,因为(据我所知)inputtextarea嵌套在已经不可选择的文档正文元素中。那么,是否可以使用CSS在Firefox中启用嵌套用户输入元素的文本选择?

感谢您的建议。

1 个答案:

答案 0 :(得分:11)

的作用:

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

工作?

请参阅this page