watermark text css_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-31 08:24 出处：网络

What is the css for the watermark text in a textarea or input box. The text should be opaque as in Title of stackoverflow saying\"What\'s your programming question? Be descriptive\" when asking que开

What is the css for the watermark text in a textarea or input box.

The text should be opaque as in Title of stackoverflow saying "What's your programming question? Be descriptive" when asking que开发者_C百科stion

Here is a simple example that uses real <label>s instead of abusing default values to be more accessible.

<!DOCTYPE HTML>
<html>
    <head>
        <title> Example of having a label that vanishes </title>
        <style type="text/css">
            /* Basic CSS for use even if JS is not around */
            .slim-control {
                color: black;
                background-color: #aaa;
                border: solid black 1px;
                padding: 3px;
                margin: 3px;
                width: 200px;
                overflow: hidden; /* Clear fix */
            }
            .slim-control label {
                float: left;
            }
            .slim-control input {
                clear: left;
                float: right;
                background: #aaa;
                color: black;
                border: solid 1px black;
                width: 150px;
                font-size: 1em;
            }
            /* And if JS is available */
            body.js .slim-control {
                position: relative;
                height: 1em;
            }   
            body.js .slim-control label,
            body.js .slim-control input {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 1em;
                margin: 0;
                padding: 0;
                border: 0;
                z-index: 2;
            }
            body.js .slim-control input {
                background-color: transparent;
                background-color: rgba(100,200,50,.2);
                z-index: 3;
            }

            body.js .slim-control input.non-empty {
                background: #aaa;   
            }

        </style>
    </head>
    <body class="js">
        <form action="." method="post">
            <div class="slim-control">

                <label for="username"> Username </label>
                <input name="username" id="username">
            </div>
            <div class="slim-control">
                <label for="password"> Password </label>
                <input name="password" id="password" type="password">
            </div>

        </form>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        (function () {
            var nonEmpty = "non-empty";
            var inputs = jQuery('.slim-control input');
            var setLabelStyle = function setLabelStyle () {
                var label = jQuery(this);
                if (label.val().length) {
                    label.addClass(nonEmpty);
                } else {
                    label.removeClass(nonEmpty);
                }
            };
            inputs.focus(function () { jQuery(this).addClass(nonEmpty); });
            inputs.blur(setLabelStyle);
            inputs.each(setLabelStyle);
        }());
    </script>
    </body>
</html>

I haven't looked at their code, but the only thing interesting on the CSS side is that the .style.color is set to a grayish color in certain situations. All of that is done with Javascript. You can study it more carefully than I have just now, but basically:

Set it to gray with the "blank" text when the box first appears
Set it to black and blank the area when the user types a character inside
Redo #1 on "blur" if the text of the textbox is blank (restore the blank text and gray it)
You might want to do #2 when the user clicks inside, i.e., the focus event.

This is actually quite fun to implement in Javascript, and you might even better the functionality you see on SO.