水印文字css答案

【问题标题】：watermark text css水印文字css
【发布时间】：2010-05-19 17:36:29
【问题描述】：

文本区域或输入框中的水印文本的 css 是什么。

文本应该是不透明的，如 stackoverflow 的标题中所说的“你的编程问题是什么？在提问时要描述性”

【问题讨论】：

这通常通过一个简单的color: #CCCCC 来实现。这不是真正的透明度。
但是点击后样式会再次相同还是平常..我有onclick改变颜色正常的要求..

【解决方案1】：

这里是a simple example，它使用真正的<label>s，而不是滥用默认值以更易于访问。

<!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>

【讨论】：

【解决方案2】：

我没有看过他们的代码，但在 CSS 方面唯一有趣的是 .style.color 在某些情况下被设置为灰色。所有这些都是用 Javascript 完成的。你可以比我刚才更仔细地研究它，但基本上：

在框首次出现时将其设置为灰色并带有“空白”文本
当用户在其中键入字符时，将其设置为黑色并空白区域
如果文本框的文本为空白，则在“模糊”上重做 #1（恢复空白文本并将其变灰）
您可能希望在用户点击内部时执行 #2，即焦点事件。

在 Javascript 中实现这实际上很有趣，您可能会更好地在 SO 上看到的功能。

【讨论】：