Question

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 |

Answer 1

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.