Html 创建一个只读文本字段但没有文本字段边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20825230/
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
Create a readonly text field but without a textfield border
提问by Ajeesh
Im trying to create a text field which is readonly but it should not look like a text field.
我试图创建一个只读的文本字段，但它不应该看起来像一个文本字段。
The normal readonly text field is
正常的只读文本字段是
Your name is [ SAM ]
but I want it like
但我想要它
Your name is SAM
That is it should look like the continuation of the sentence and can still act as a text field on to which we can show value (here SAM). Any way to do that?
也就是说，它应该看起来像句子的延续，并且仍然可以作为我们可以显示价值的文本字段（这里是 SAM）。有没有办法做到这一点？
回答by Ruddy
What your looking for is this:
你要找的是这个：
HTML:
HTML：
Your name is <input type="text" value="SAM" readonly="readonly" />
CSS:
CSS：
input {
border: 0;
}
You can set the input field to readonlyin the HTML, this will make it so you cannot edit the field. Then you want to get rid of the border to so it makes it look like its apart of the text. Then customise it as you see fit.
您可以readonly在 HTML中将输入字段设置为，这将使您无法编辑该字段。然后你想去掉边框，使它看起来像文本的一部分。然后按照您认为合适的方式对其进行自定义。
Update:
更新：
If the input is in a div/span you can just the inputs within that div/spanlike so:
如果输入在 div/span 中，您可以只输入div/ 中的输入，span如下所示：
HTML:
HTML：
<span class="test">Your name is <input type="text" value="SAM" readonly="readonly" /></span>
CSS:
CSS：
.test input {
border: 0;
}
回答by semirturgay
to style all readonly textboxes apply following CSS rule
样式所有只读文本框应用以下 CSS 规则
input[readonly="readonly"] {
border:0px;
}
回答by tewathia
Set the border, outline and background to noneand you'll get the desired effect.
将边框、轮廓和背景设置为none，您将获得所需的效果。
input[disabled] {
background:none;
border:none;
outline:none;
}
It would still take the default min-width though, so you might have to set the width to a smaller value.
尽管如此，它仍将采用默认的 min-width，因此您可能必须将宽度设置为较小的值。
回答by Siamak A.Motlagh
回答by Sai Kiran Sripada
Add this to your CSS:
将此添加到您的 CSS：
input[type="text"], input[type="text"]:focus { border: none; outline: 0; }
回答by schnawel007
Set the Border to 0px and the background to transparent, This should be work.
将 Border 设置为 0px 并将背景设置为透明，这应该可以工作。
In CSS file:
在 CSS 文件中：
*
{
font-size: 14px;
font-family: Arial;
}
input[type="text"]
{
border:0px solid red;
background: none;
}
In HTML file:
在 HTML 文件中：
Hello <input type="text" value="John">
回答by user1627363
Yes, why don't you use CSSfor this?
是的，你为什么不用CSS这个？
Add:
添加：
input[type="text"] { border: none; }
input[type="text"] { border: none; }
Also an option: adding background transparancy as stated above.
还有一个选项：如上所述添加背景透明度。
回答by Saad Bhutto
<input type="text" value = "Your Name is SAM" readonly= "true" style ="border: none" name="name"/>
