html - CSS:无法选择带有用户选择的子文本:自动,而父具有用户选择:无

标签 html css

我正在尝试编写一个包含整个说明的输入表单。我希望文本不可选择,但我当然希望输入是可选择的,以便用户可以轻松修改他们的文本。

我的 HTML 看起来像这样:

<div id="form">
<header> Some header text </header>
Instructions on what to do.
<form>
<label>first name:</label><input type="text" name="fname" />
<label>last:</label><input type="text" name="lname" />
<label>email:</label><input type="text" name="email" />
</form>
<div id="extras"> A bunch of separate notes and maybe a textarea box</div>
</div>

我的 CSS 看起来像这样:

#form{ user-select:none; }
#form form input{user-select:auto}

一些注意事项:
我在我的实际代码中包含了各种浏览器的所有 css。
我尝试了 user-select:text,但没有成功。
我有很多文本分成不同的部分,所以我非常喜欢删除作为默认行为的选择功能,而只将选择功能应用于输入。应用代码使每一小段文本都无法选择会很痛苦。
即使我做了上面的修复,我仍然会对这个问题感到好奇。

有人知道为什么会这样吗?

最佳答案

没有user-select: auto; 你应该使用user-select: text; Your given code works,所以您可能想要包括其余代码或链接到它。

关于html - CSS:无法选择带有用户选择的子文本:自动,而父具有用户选择:无,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16115083/

相关文章:

javascript - ReactJS-图像src调用另一个文件夹错误

javascript - PDF 中的 SVG + HTML(javascript 或 php)

html - 在html中的iframe顶部放置一个div

html - 带有边框 css 的 div 内容

javascript - 使用原型(prototype)偏移高度

c# - 服务器控件生成的样式化 html

jquery - float DIV 以填充未使用的空间

javascript - 使用javascript扩展/缩小图像?

javascript - 基于日期比较使用 JQuery(或简单的 Javascript)动态更改 CSS

jquery - 居中 jQuery 模态对话框弹出窗口