创建只读文本字段但没有文本字段边框

Question

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

正常的只读文本字段是

Your name is [ SAM ]

但我希望它像

Your name is SAM

它应该看起来像句子的延续，并且仍然可以充当我们可以显示价值的文本字段（这里是SAM）。 有办法吗？

Answer 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

Answer 2

为所有只读文本框设置样式应用于CSS规则

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

Answer 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 >

Answer 4

将边框，轮廓和背景设置为none，您将获得所需的效果。

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

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

DEMO

Answer 5

将此添加到您的CSS：

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

Answer 6

将Border设置为0px，将背景设置为透明，这应该可行。

在CSS文件中：

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

在HTML文件中：

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

Answer 7

是的，为什么不为此使用CSS？

添加：

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

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

Answer 8

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