How to set a text as background of input type=“text”?

How to set a text as a background of <input type="text"> It should not be a placeholder. But always visible. For example:

| 'from:' user enters date here |

Answers


You could always wrap your text and textfield in a div and then style the overall thing to look like a textfield.

So using this HTML:

<div>
    <label id="lead" for="from">From: </label>
    <input id="from" type="text" />
</div>

And this styling:

div {
    background-color: white;
    border: 2px inset;
    cursor: auto;
    width: 250px;
}
label {
    color: gray;
}
input, input[type="text"], input:focus {
    border: none;
    outline: none;
}

Would result in this JSFiddle demo. (Tested in Chrome and FF.)

EDIT

Since the OP indicates he is looking to use the JQuery UI Date Picker, the solution would have to be slightly tweaked to allow both the label and the textfield to trigger the date picker. This is quite simple and was covered in this question.

The HTML would have to be changed to add a class name to the "wrapping" div: <div class="extended-textfield">. This is because the date picker itself is also contained in a <div> and too generic of a CSS style causes all sorts of nasty styling collisions.

The CSS selector for the div would change to div.extended-textfield.

And the JavaScript:

$( "#from" ).datepicker();
$("#lead").click(function() {
    $("from").datepicker('show');
});
‚Äč

Working demo is here.


If you mean placeholder text, then try <input type="text" placeholder="Hint Text!">

But, if a persistent text is required, then may be try this: http://jsfiddle.net/j8SXZ/

EDIT: Going with the updated question, this is exactly what you're looking for.

UPDATE: for the comment/feedback on background color - http://jsfiddle.net/Debloper/j8SXZ/3/


Need Your Help

What happens when user does not respond to Push Notification?

iphone apple-push-notifications

Lets assume a user receives a notification. The user did not respond to notification. what happens? will it automatically get closed? if yes, what is the duration for the expiry of notification o...

Android: Issue in downloading to SD

java android android-sdcard

I've developed an application in which user can download .mp3 files from server. And pre-defined a path to mnt/sdcard/foldername for saving such files. I had run my program in HTC, LG, Samsung works

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.