текст водяного знака css - PullRequest
Новая
       5

текст водяного знака css

0 голосов
/ 19 мая 2010

Что такое CSS для текста водяного знака в текстовой области или в поле ввода.

Текст должен быть непрозрачным, как в заголовке stackoverflow, в котором говорится: «Какой у вас программный вопрос? Будьте описательным» при задании вопроса

Ответы [ 2 ]

2 голосов
/ 19 мая 2010

Вот простой пример , который использует реальные <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>
1 голос
/ 19 мая 2010

Я не смотрел на их код, но единственное, что интересно на стороне CSS, это то, что .style.color в некоторых ситуациях имеет сероватый цвет. Все это делается с помощью Javascript. Вы можете изучить это более тщательно, чем я сейчас, но в основном:

  1. Установите его на серый с пустым текстом при первом появлении поля
  2. Установите его на черный и очистите область, когда пользователь вводит символ внутри
  3. Повторите # 1 при «размытии», если текст текстового поля пуст (восстановите пустой текст и выделите его серым цветом)
  4. Возможно, вы захотите сделать # 2, когда пользователь щелкает внутри, т.е. событие фокуса.

На самом деле это довольно интересно реализовать в Javascript, и вы можете даже улучшить функциональность, которую вы видите в SO.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...