当前位置: 首页 > 面试题库 >

在“ input”元素之前或之后的CSS内容生成[重复]

韦棋
2023-03-14
问题内容

在Firefox 3和Google Chrome 8.0中,以下功能可以正常运行:

<style type="text/css">
    span:before { content: 'span: '; }
</style>

<span>Test</span> <!-- produces: "span: Test" -->

但是当元素为时不是这样<input>

<style type="text/css">
    input:before { content: 'input: '; }
</style>

<input type="text"></input> <!-- produces only the textbox; the generated content
                                 is nowhere to be seen in both FF3 and Chrome 8 -->

为什么它不按我的预期工作?


问题答案:

使用:before:after指定要在该元素内部 的内容 之前(或之后)插入 的内容input元素没有内容。

例如,如果你写的<input type="text">Test</input>(这是错误的),浏览器会纠正这一点,并把文字 输入元素。

您唯一可以做的就是将每个输入元素包装在span或div中,并在这些元素上应用CSS。

请参阅规范的示例:

例如,以下文档片段和样式表:

<h2> Header </h2>               h2 { display: run-in; }
<p> Text </p>                   p:before { display: block; content:

‘Some’; }

…将以与以下文档片段和样式表完全相同的方式进行渲染:

<h2> Header </h2>            h2 { display: run-in; }
<p><span>Some</span> Text </p>  span { display: block }

这是一样的道理,为什么它不工作<br><img>等(<textarea>好像是特殊)。



 类似资料:
  • 问题内容: 在Firefox 3和Google Chrome 8.0中,以下功能可以正常运行: 但是当元素为时不是这样: 为什么它不按我的预期工作? 问题答案: 使用和指定要在该元素内部 的内容 之前(或之后)插入 的内容 。元素没有内容。 例如,如果你写的(这是错误的),浏览器会纠正这一点,并把文字 后 输入元素。 您唯一可以做的就是将每个输入元素包装在span或div中,然后将CSS应用于这些

  • 问题内容: 我想使用一个开关在网页上放置段落标签。 我使用after伪元素: 现在,我需要从页面中删除此CSS代码。 如何轻松做到这一点? 我要补充一点: jQuery已在页面上使用 而且我不想包含或删除包含CSS的文件。 问题答案: p:after { content: none; } none 是将内容(如果指定)设置为 空 的官方值。

  • 问题内容: 是否可以隐藏元素的内容,但保持其内容可见?说我有以下代码: HTML: CSS: 我试过了: 使用和设置为,但两者均仍处于隐藏状态 使用;,但随后似乎增加了额外的空间(?) 使用颜色:透明;但是,当然,跨度的内容仍会占用空间 使用,但是 这被搜索引擎和 似乎不适用于span元素(?) 关于如何执行此操作还有其他想法吗? 问题答案: 您可以使用,但是使用此解决方案,隐藏的内容仍然 会占用

  • 问题内容: 这是我的代码,也许您会立即注意到我所缺少的内容: 我正在尝试在CustomerId现有节点之前插入新的node()。这是我的XML示例文件: 这是一个抛出异常,我只是不知道还能尝试什么: NOT_FOUND_ERR:尝试在不存在的上下文中引用该节点。 问题答案: 在这里,我只是使用您提供的xml示例进行了测试的示例。 结果如下: 如果您有兴趣,这是我用来显示结果的示例代码:

  • 问题内容: 我对了解何时可以将和伪元素应用于自动关闭标签特别感兴趣。根据W3生成的内容CSS规范,这是这些伪元素的定义: 12.1:before和:after伪元素 :作者使用 :before和:after伪元素 指定生成内容的样式和位置。顾名思义,:before和:after伪元素指定元素的文档树内容之前和之后的内容位置。“ content”属性与这些伪元素一起指定了要插入的内容。 基于此,这些