HTML输入样式可隐藏框但显示内容

时间:2008-09-29 20:30:54

标签: html css printing

我有一个HTML格式的表单,我们的用户填写数据然后打印出来。数据不会保存在任何地方。这些表单来自我们公司外部,并构建为html页面,尽可能地与原始页面相似,然后在Intranet上的文件夹中填充和遗忘。通常情况下,另一位开发人员会这样做,但我必须在他出去的时候做几件事。通过他的代码,他的所有表单都有一堆服务器端代码来获取输入并重新编写只包含内容的页面。似乎应该有更好的方法。

我想使用媒体选择器设置文本输入的样式,以便在打印时可以看到文本,但不能看到它周围的框。有什么想法吗?

3 个答案:

答案 0 :(得分:11)

通过执行以下操作添加单独的CSS文件进行打印:

<link rel="stylsheet" type="text/css" media="print" href="print.css">

将其添加到页面的<head>部分。

在此(print.css)文件中包含与打印页面时要查看的内容相关的样式,例如:

input{border: 0px}应该在打印时隐藏输入框的边框。

答案 1 :(得分:7)

假设你只想从文本中删除边框等,你需要给它们一个类。也许是这样的:

<input type="text" class="print-clean" .../>

并且css,载有media =“print”:

<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />

将包含以下内容:

.print-clean {
    border: none;
    background: transparent;
}

答案 2 :(得分:4)

<input type="text" style="border: 0; background-color: #fff;" />

其中#fff是你的背景颜色..