HTML 输入样式隐藏框但显示内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/150513/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML input style to hide the box but show the contents
提问by Joel Coehoorn
I have a form in HTML where our users fill in the data and then print it. The data isn't saved anywhere. These forms come from outside our company and are built as html pages to resemble the original as closely as possible and then stuffed away and forgotten in a folder on the intranet. Normally another developer does them, but I have to do a few while he's out. Looking through his code, all his forms have a bunch of server-side code to take the inputs and re-write the page with only the contents. It seems like there should be a better way.
我有一个 HTML 表单，我们的用户在其中填写数据然后打印出来。数据不会保存在任何地方。这些表格来自我们公司外部，并被构建为 html 页面，以尽可能接近原始页面，然后塞进内部网上的文件夹中并遗忘。通常另一个开发人员会做这些，但我必须在他不在的时候做一些。查看他的代码，他的所有表单都有一堆服务器端代码来获取输入并仅使用内容重新编写页面。似乎应该有更好的方法。
I want to just style the text inputs using a media selector so that when it prints you can see the text, but nothing of the box surrounding it. Any thoughts?
我只想使用媒体选择器设置文本输入的样式，以便在打印时您可以看到文本，但看不到它周围的框。有什么想法吗？
回答by Maciej
Add a separate CSS file for printing by doing something like this:
通过执行以下操作添加单独的 CSS 文件以进行打印：
<link rel="stylsheet" type="text/css" media="print" href="print.css">
add it to the <head>section of the page.
将其添加到<head>页面的部分。
In this(print.css) file include styling relevant to what you want to see when the page is printed, for example:
在这个(print.css) 文件中包含与您想在打印页面时看到的内容相关的样式，例如：
input{border: 0px}should hide the border of input boxes when printing.
input{border: 0px}打印时应该隐藏输入框的边框。
回答by Chris Marasti-Georg
Assuming you only want to remove the border and such from texts, you'll need to give them a class. Maybe something like:
假设您只想从文本中删除边框等，您需要给它们一个类。也许是这样的：
<input type="text" class="print-clean" .../>
And css, loaded with media="print":
和 css，加载了 media="print"：
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />
would contain something like this:
将包含这样的内容：
.print-clean {
border: none;
background: transparent;
}
回答by Wayne
<input type="text" style="border: 0; background-color: #fff;" />
Where #fff is your background color..
#fff 是您的背景颜色。
