文本区域或输入框中的水印文本的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>