1

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 |

Oleg Dats
  • 3,933
  • 9
  • 38
  • 61
  • 1
    There is no such thing as a "background text". Are you talking about a hint-text type setup, such as the word "search" in the SO search box in the top right hand corner of the site? – freefaller Sep 10 '12 at 17:11
  • 1
    possible duplicate of [Is there a way to use use text as the background with CSS?](http://stackoverflow.com/questions/1191464/is-there-a-way-to-use-use-text-as-the-background-with-css) – PeeHaa Sep 10 '12 at 17:11

3 Answers3

4

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/

Debloper
  • 158
  • 1
  • 8
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.

Community
  • 1
  • 1
Roddy of the Frozen Peas
  • 14,380
  • 9
  • 49
  • 99
  • it's a nice solution but will not work for me because I use jquery ui daterange. Which is attached to the text field. So after clicking on label it will not be shown. – Oleg Dats Sep 10 '12 at 17:56
  • 1
    @OlegDats - Of course it works. Look at [this updated JSFiddle](http://jsfiddle.net/FvqEw/3/) using the JQuery UI date picker. (Of course you'd need to style the date picker yourself.) You just need to bind the 'show date picker' function to the label, like [in this question](http://stackoverflow.com/questions/1262113/how-to-call-bind-a-jquery-datepicker-to-a-label-or-div-instead-of-an-input-field). – Roddy of the Frozen Peas Sep 10 '12 at 18:11
0

A couple of examples that might satisfy you [1].

  • The first example uses CSS-content, ie the text is defined by the CSS and is inserted via a CSS pseudo-element. Note that form elements themselves are not supposed to generate pseudo-elements, so a wrapper is necessary.
  • The second example uses real content, that of the label, to provide the text.

The essence of the trick is to give the input a transparent background and an absolute position within a wrapper of similar dimensions with position set to relative, so that it is placed immediately on top of whatever content is below, and lets it shine through.

[1] http://codepen.io/barneycarroll/pen/bizIm

Barney
  • 16,181
  • 5
  • 62
  • 76