【问题标题】：Create a readonly text field but without a textfield border创建一个只读文本字段，但没有文本字段边框
【发布时间】：2014-01-16 11:51:21
【问题描述】：

我正在尝试创建一个只读的文本字段，但它不应该看起来像一个文本字段。

普通的只读文本字段是

Your name is [ SAM ]

但我想要这样

Your name is SAM

也就是说，它应该看起来像句子的延续，并且仍然可以充当我们可以在其上显示价值的文本字段（此处为 SAM）。有什么办法吗？

【问题讨论】：

你可以通过css来实现。
或html5内容可编辑html5doctor.com/the-contenteditable-attribute

标签： html css textfield

【解决方案1】：

你要找的是这个：

HTML：

Your name is <input type="text" value="SAM" readonly="readonly" />

CSS：

input {
    border: 0;
}

您可以在 HTML 中将输入字段设置为readonly，这样您就无法编辑该字段。然后你想去掉边框，让它看起来像是文本的一部分。然后根据您的需要对其进行自定义。

DEMO HERE

更新：

如果输入在 div/span 中，您可以只在 div/span 中输入，如下所示：

HTML：

<span class="test">Your name is <input type="text" value="SAM" readonly="readonly" /></span>

CSS：

.test input {
    border: 0;
}

DEMO HERE

【讨论】：

我希望该输入无边框，我尝试创建一个类并添加到该输入，但其默认设计即将推出
它是用什么包装的？只需将div class 或 id 放在前面即可。或者就此而言，您可以只给输入一个自己的类并使用它。
当我使用我的 css 类删除只读它时，但是当添加只读时它会丢失它的 css 属性
在您的示例中，您没有设置课程。班级是.。你只是在设置x。将 CSS 更改为 .x 而不是 x，它将修复它。 DEMO HERE
请查看stackoverflow.com/questions/20825486/…

【解决方案2】：

所有只读文本框的样式都遵循 CSS 规则

input[readonly="readonly"] {
      border:0px;
}

【讨论】：

这是最好的答案，因为只有“只读”输入受到影响。

【解决方案3】：

这可以通过css来完成。 LIVE DEMO

<style>
*
{
    font-family: Tahoma;
    font-size: 13px;
}
input
{
    background-color:transparent;
    border:0px;
    padding:0px;
}
</style>
this is the <input type='text' value='textbox' readonly >

【讨论】：

【解决方案4】：

将边框、轮廓和背景设置为none，就可以得到想要的效果了。

input[disabled] {
    background:none;            
    border:none;
    outline:none;
}

但它仍会采用默认的最小宽度，因此您可能需要将宽度设置为较小的值。

DEMO

【讨论】：

【解决方案5】：

将此添加到您的 CSS：

input[type="text"], input[type="text"]:focus { border: none; outline: 0; }

【讨论】：

【解决方案6】：

是的，你为什么不用CSS呢？

添加：

input[type="text"] { border: none; }

还有一个选项：如上所述添加背景透明度。

【讨论】：

【解决方案7】：

<input type="text" value = "Your Name is SAM" readonly= "true" style ="border: none" name="name"/>

【讨论】：

【解决方案8】：

将边框设置为0px，背景设置为透明，这应该可以。

在 CSS 文件中：

*
{
    font-size: 14px;
    font-family: Arial;
}
input[type="text"]
{
    border:0px solid red;
    background: none;
}

在 HTML 文件中：

Hello <input type="text" value="John">

【讨论】：