워터 마크 텍스트 CSS

텍스트 영역 또는 입력란의 워터 마크 텍스트에 대한 CSS는 무엇입니까?워터 마크 텍스트 CSS

텍스트에 유래 말의 제목에서와 같이 불투명해야 내가 그들의 코드를보고하지 않은 질문을

2010-05-19 Hulk

이것은 일반적으로 간단한 '색상 : # CCCCC'에 의해 달성됩니다. 진정한 투명성이 아닙니다. –

클릭 후 스타일이 다시 동일하거나 평범한 것입니다. 나는 onclick의 색상을 보통으로 변경해야합니다. – Hulk

를 요청할 때 "무슨 설명해야합니다? 프로그래밍 질문"하지만, CSS 측 흥미 유일한입니다 특정 상황에서는 .style.color이 칙칙한 색으로 설정됩니다. 모든 것은 자바 스크립트로 처리됩니다. 당신은 기본적으로 더주의 깊게 난 그냥 지금 것보다 공부 만 할 수는 "빈"텍스트가 회색으로

세트 박스가 최초의 흑인 빈 지역에
설정을 표시 할 때 때 사용자 형식은 "흐림"텍스트 상자의 텍스트가 비어있는 경우 (빈 텍스트를 복원하고 회색)에
다시 실행 # 1 내부 문자
당신은 수행 할 수 있습니다 # 2 사용자가, 즉, 내부 클릭 초점 이벤트.

이것은 실제로 자바 스크립트로 구현하는 것이 재미 있고, SO에서 볼 수있는 기능을 더 잘 수행 할 수도 있습니다.

출처

2010-05-19 09:29:05

여기에 <label>을 사용하는 a simple example은보다 쉽게 액세스 할 수 있도록 기본값을 악용하는 대신 사용됩니다.

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

워터 마크 텍스트 CSS

답변

관련 문제