使HTML输入框只显示文本而不是边框

Question

我有一个包含多个字段的HTML表单，这些字段是使用jQuery动态添加内容的。请问是否可以隐藏这些字段是输入字段，并仅显示它们作为字段中的内容？

我不想隐藏整个字段及其内容，只想隐藏其是输入类型字段的事实。

我已经尝试了jQuery的hide()和$('#foo').css('display','none')，但那会隐藏整个字段。

我的想法是可能会有大量的字段，但我不想让用户看到所有的输入文本字段。

- Raj

---

你是说你不想显示边框？ - user2625787

如果你不想让它们看起来像输入项，为什么要把它们设为输入项？ - Pevara

你想显示文本但不想显示字段吗？为什么要使用输入字段呢？还是你只想重新格式化输入字段的CSS以使其看起来不同？ - Automate This

如果我理解正确的话，您想要类似于这个 http://jsfiddle.net/xVFX2/ 的东西。但请记住，这可能会使您的用户感到困惑。 - m3div0

当表单的提交按钮被点击时，我需要能够提交输入内容。 - Raj

Answer 1

从这样的内容开始：

input {
    border: none;
    outline: none;
    background-color: transparent;
    font-family: inherit;
    font-size: inherit;
}

- Trevor Dixon

---

同时也要移除背景。 - putvande

Answer 2

这个怎么样：

这是一个示例：

$('.dynamic input').each(function() {
    $('<div/>').html($(this).val()).insertAfter($(this).hide());
});

- OneOfOne

---

最终我做了类似这样的事情，因此我将其标记为答案。我捕获了该字段的值，并根据需要使用CSS进行样式设置，然后使用hide()隐藏输入。这对我的目的起作用，而不必重新设计输入字段本身。 - Raj

Answer 3

使用CSS的border:none;属性，并确保盒子足够长/高。

- Math chiller

---

虽然这不是一个响应式的解决方案，但它真的很有效！赞！ - nehem