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

发布于 2024-08-31 22:03:40 字数 1350 浏览 13 评论 0原文

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

<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 嵌套在文档正文中已经存在的元素是不可选择的。那么，是否可以使用 CSS 在 Firefox 中启用嵌套用户输入元素的文本选择？

谢谢您的建议。

原文

Let's consider the following scenario. I have the following page where all rendered elements must be non-selectable.

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

The input and textarea text is still selectable in Google Chrome, but the text is not selectable in Firefox. I've already tried the following:

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

And... It simply doesn't work because (as far as I can see) input and textarea are nested in the document body element that's already is not selectable. So, is it possible to enable text selection of the nested user input elements in Firefox using CSS?

Thank you for suggestions.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

把人绕傻吧 2024-09-07 22:03:40

有：

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

有效吗？

请参阅此页面。

Does:

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

work?

See this page.

回复收藏 0 原文

~没有更多了~