Make an HTML input field appear as just the text in the field

Question

I have an HTML form with a number of input fields that are added dynamically with content in each field using jQuery.

Is it possible to hide the fact that these fields are input fields and only display them as the content in the field?

I don't want to hide the entire field and it's contents --- just hide the fact that its an input type field.

I've tried jQuery's hide() and $('#foo').css('display','none'), but that hides the entire field.

The idea is that there could be a large number of fields, but I don't want the user to see all the input text fields.

Answer 1

Start with something like this:

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

Answer 2

How about something like this :

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