Create a readonly text field but without a textfield border

Question

Im trying to create a text field which is readonly but it should not look like a text field.

The normal readonly text field is

Your name is [ SAM ]

but I want it like

Your name is SAM

That is it should look like the continuation of the sentence and can still act as a text field on to which we can show value (here SAM). Any way to do that?

Answer 1

What your looking for is this:

HTML:

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

CSS:

input {
    border: 0;
}

You can set the input field to readonly in the HTML, this will make it so you cannot edit the field. Then you want to get rid of the border to so it makes it look like its apart of the text. Then customise it as you see fit.

DEMO HERE

Update:

If the input is in a div/span you can just the inputs within that div/span like so:

HTML:

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

CSS:

.test input {
    border: 0;
}

DEMO HERE

Answer 2

to style all readonly textboxes apply following CSS rule

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