水印文本css

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

文本应该是不透明在计算器说题目“什么是你的编程问题？成为描述”问问题的时候

来源

2010-05-19 Hulk

通常通过简单的'color：＃CCCCC'来实现。这不是真正的透明度。 – 2010-05-19 09:25:00

但点击后，风格会再次相同或平常.. 我有onclick更改颜色要求正常.. – Hulk 2010-05-19 09:28:19

我没有看过他们的代码，但是在CSS侧有趣的事情就是在某些情况下，.style.color设置为灰色。所有这些都是用Javascript完成的。您可以更仔细比我刚才研究它，但基本上是：当箱第一次出现

它设置为黑色，空白区域

将其设置为灰色的“空白”的文本，当用户类型上的“模糊”如果文本框的文本是空白的（恢复的空白文本和灰色它）内
重做＃1的字符
你可能想要做的＃2，当用户点击里面，即焦点事件。

这实际上在Javascript中实现起来非常有趣，你甚至可能会更好地了解你在SO上看到的功能。

来源

2010-05-19 09:29:05

这里是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>

来源

2010-05-19 09:30:49 Quentin

回答

相关问题