水印文本css_Css_Css Selectors - Fatal编程技术网

水印文本css

css

水印文本css,css,css-selectors,Css,Css Selectors,文本区域或输入框中水印文本的css是什么文本应该是不透明的，如stackoverflow的标题中所说的“你的编程问题是什么？请描述一下”当我问问题时，我没有看他们的代码，但CSS方面唯一有趣的是，.style.color在某些情况下设置为灰色。所有这些都是通过Javascript完成的。你可以比我刚才更仔细地研究，但基本上：当框首次出现时，将其设置为灰色，并显示“空白”文本当用户在其中键入字符时，将其设置为黑色并清空该区域如果文本框为空白（恢复空白文本和灰色）

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

文本应该是不透明的，如stackoverflow的标题中所说的“你的编程问题是什么？请描述一下”当我问问题时，我没有看他们的代码，但CSS方面唯一有趣的是，

.style.color

在某些情况下设置为灰色。所有这些都是通过Javascript完成的。你可以比我刚才更仔细地研究，但基本上：

当框首次出现时，将其设置为灰色，并显示“空白”文本

当用户在其中键入字符时，将其设置为黑色并清空该区域

如果文本框为空白（恢复空白文本和灰色）<，请在“模糊”上重写“1”

您可能希望在用户单击内部时执行#2，即焦点事件

在Javascript中实现这一点实际上非常有趣，而且您可能会看到更好的功能。

我没有看过他们的代码，但CSS方面唯一有趣的是，

.style.color

在某些情况下设置为灰色。所有这些都是通过Javascript完成的。你可以比我刚才更仔细地研究，但基本上：

当框首次出现时，将其设置为灰色，并显示“空白”文本

当用户在其中键入字符时，将其设置为黑色并清空该区域

如果文本框为空白（恢复空白文本和灰色）<，请在“模糊”上重写“1”

您可能希望在用户单击内部时执行#2，即焦点事件

在Javascript中实现这一点实际上非常有趣，而且您可能会更好地使用您在上面看到的功能。

这里使用的是real

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>


具有消失的标签的示例
/*即使JS不存在，也可以使用基本CSS*/
.纤细控制{
颜色：黑色；
背景色：#aaa；
边框：纯黑1px；
填充：3倍；
保证金：3倍；
宽度：200px；
溢出：隐藏；/*清除修复*/
}
.超薄控制标签{
浮动：左；
}
.超薄控制输入{
清除：左；
浮动：对；
背景：#aaa；
颜色：黑色；
边框：实心1px黑色；
宽度：150px；
字号：1em；
}
/*如果JS可用*/
body.js.slim控件{
位置：相对位置；
高度：1米；
}   
body.js.超薄控制标签，
body.js.slim控件输入{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：1米；
保证金：0；
填充：0；
边界：0；
z指数：2；
}
body.js.slim控件输入{
背景色：透明；
背景色：rgba（100200,50,2）；
z指数：3；
}
body.js.slim control input.non-empty{
背景：#aaa；
}
用户名
密码
（功能（）{
var nonEmpty=“非空”；
var inputs=jQuery（'.slim control input'）；
var setLabelStyle=函数setLabelStyle（）{
var label=jQuery（this）；
if（label.val（）.length）{
label.addClass（非空）；
}否则{
label.removeClass（非空）；
}
};
focus（函数（）{jQuery（this）.addClass（非空）；}）；
输入。模糊（setLabelStyle）；
每个输入（setLabelStyle）；
}());

这里是一个使用real

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>


具有消失的标签的示例
/*即使JS不存在，也可以使用基本CSS*/
.纤细控制{
颜色：黑色；
背景色：#aaa；
边框：纯黑1px；
填充：3倍；
保证金：3倍；
宽度：200px；
溢出：隐藏；/*清除修复*/
}
.超薄控制标签{
浮动：左；
}
.超薄控制输入{
清除：左；
浮动：对；
背景：#aaa；
颜色：黑色；
边框：实心1px黑色；
宽度：150px；
字号：1em；
}
/*如果JS可用*/
body.js.slim控件{
位置：相对位置；
高度：1米；
}   
body.js.超薄控制标签，
body.js.slim控件输入{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：1米；
保证金：0；
填充：0；
边界：0；
z指数：2；
}
body.js.slim控件输入{
背景色：透明；
背景色：rgba（100200,50,2）；
z指数：3；
}
body.js.slim control input.non-empty{
背景：#aaa；
}
用户名
密码