CODEWITHSUNDEEP
javascripthtml
ewein
ewein

Reputation: 2735

Displaying Textbox Value

How can I only show the value of a text field, and not the actual white box. So what I have is a simple text field of type number. 

<input type="number" id="text" value="0"/>

What I want to do is only show the value, not the actual box itself.

Upvotes: 2

Views: 266

Answers (5)

Karthi Shan
Karthi Shan

Reputation: 71

Just change your code like this:

<input type="number" id="text" value="0" style="border:0px;"/>

This should produce your expected result.

Upvotes: 0

Karthi Shan
Karthi Shan

Reputation: 71

<div style="background:#FFFFCC">
<input type="number" id="text" value="0" style="border:0px; background:none;"/>
</div>

Upvotes: 0

Tom Pietrosanti
Tom Pietrosanti

Reputation: 4294

As heavysixer mentioned, you can use CSS:

#text{
    border: none;
    background: none;
    cursor: default;
    padding:0;
    margin:0;
    font-size:1em;
}

You'll want to make the font match the rest of your document. Here's a fiddle to demonstrate: http://jsfiddle.net/mestekweb/URkca/

Upvotes: 0

Forte L.
Forte L.

Reputation: 2812

You can remove the borders and set the background-color to transparent with CSS:

input
{
    border: none;
    background-color:transparent;
}

Upvotes: 1

heavysixer
heavysixer

Reputation: 2069

You should be able to do this with CSS. Just style the box to look like the background of your webpage, and then set the properties of the input box to be disabled so that the user cannot change the values. Finally, you can set the CSS for the cursor so that upon mouseover it doesn't appear like it's a textfield.

Upvotes: 4

Related Questions