Create a readonly text field but without a textfield border - html

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

Answer 3

It can be done by 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

Set the border, outline and background to none and you'll get the desired effect.
input[disabled] {
background:none;
border:none;
outline:none;
}
It would still take the default min-width though, so you might have to set the width to a smaller value.
DEMO

Answer 5

Add this to your CSS:
input[type="text"], input[type="text"]:focus { border: none; outline: 0; }

Answer 6

Yes, why don't you use CSS for this?
Add:
input[type="text"] { border: none; }
Also an option: adding background transparancy as stated above.

Answer 7

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

Answer 8

Set the Border to 0px and the background to transparent, This should be work.
In CSS file:
*
{
font-size: 14px;
font-family: Arial;
}
input[type="text"]
{
border:0px solid red;
background: none;
}
In HTML file:
Hello <input type="text" value="John">