title: How to create shadow in JSF input field
body: <p>I registered account into oracle.com web site and I saw something very interesting:
  <img src="https://i.stack.imgur.com/I49Ul.png" alt="enter image description here"></p>
  
  <p>See the input field of the telephone number into the form. How I can reproduce the same into JSF input form? Is this made by CSS?</p>
  
  <p><strong>CODE UPDATE</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"   
        xmlns:h="http://java.sun.com/jsf/html"&gt;
      &lt;h:head&gt;
          &lt;script type="text/javascript"&gt;
              &lt;!-- input field shadow  --&gt;
              var placeholder = "test field"
              $("input").on({
                  focus: function() {
                      if (this.value == placeholder) {
                          $(this).val("").removeClass("shadow");
                      }
                  },
                  blur: function() {
                      if (this.value == "") {
                          $(this).val(placeholder).addClass("shadow");
                      }
                  }
              }).trigger("blur");​            
          &lt;/script&gt;       
  
      &lt;/h:head&gt;
  
      &lt;h:body&gt;
          &lt;h1&gt;JSF 2 textbox example with shadow&lt;/h1&gt;
  
          &lt;h:form&gt;
              &lt;h:inputText value="#{userBean.userName}" /&gt;
              &lt;h:commandButton value="Submit" action="user" /&gt;
          &lt;/h:form&gt;
  
      &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I tested this code but it's not working. Maybe I need to call the JavaScript code as function into the <code>&lt;h:inputText&gt;</code> tag?</p>