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

文本应该是不透明的,如在stackoverflow的标题中所说的那样:“您的编程问题是什么?要描述性”

最佳答案

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

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

10-05 20:40
查看更多