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

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;
}

您可以readonly在HTML中设置输入字段,这将使您无法编辑该字段.然后你想摆脱边界,使它看起来像文本的一部分.然后根据需要自定义它.

在这里演示

更新:

如果输入在div/span中,你可以只是那个div/中的输入,span所以:

HTML:

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

CSS:

.test input {
    border: 0;
}

在这里演示

Answer 2

设置所有只读文本框的样式，请遵循CSS规则

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