title: Clear button in input[text]
body: <p>//May I have a very big problems in english, but I hope you'll understand.</p>
  
  <p>In general, I tryed to use Marco's code, but I have a big problem with using an icon instead a text in button. I masked it, gave it a transparent background, deleted outline and borders. And it doesn't helped me. I solve it so:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".clearbutton").click(function(){
    $(".clearable").val("");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>::-webkit-input-placeholder {
      text-align: center;
      text-shadow: none;
      -webkit-text-fill-color: initial;
  }
  
  :-moz-placeholder { /* Firefox 18- */
      text-align: center;  
      text-shadow: none;
      -webkit-text-fill-color: initial
  }
  
  ::-moz-placeholder {  /* Firefox 19+ */
      text-align: center;  
      text-shadow: none;
      -webkit-text-fill-color: initial
  }
  
  :-ms-input-placeholder {  
      text-align: center; 
      text-shadow: none;
      -webkit-text-fill-color: initial
  }
  
  input[type="text"] {
      background-image: linear-gradient(#FAFAFA, #F1F1F1);
      border-radius: 4px;
      border-width: 0.5px;
      border-color: #ABABAB;
      padding: 3px 6px;
      outline: none;
      border-style: solid;
      color: #ABABAB;
      text-shadow: 0px 0px 0px #000000;
      -webkit-text-fill-color: transparent;
  }
  
  input[type="text"]::-webkit-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
  input[type="text"]::-moz-placeholder                {text-indent: 0px;   transition: text-indent 0.3s ease;}
  input[type="text"]:-moz-placeholder                 {text-indent: 0px;   transition: text-indent 0.3s ease;}
  input[type="text"]::-ms-input-placeholder            {text-indent: 0px;   transition: text-indent 0.3s ease;}
  input[type="text"]:focus::-webkit-input-placeholder {text-indent: -500px; transition: text-indent 0.3s ease;}
  input[type="text"]:focus::-moz-placeholder          {text-indent: -500px; transition: text-indent 0.3s ease;}
  input[type="text"]:focus:-moz-placeholder           {text-indent: -500px; transition: text-indent 0.3s ease;}
  input[type="text"]:focus:-ms-input-placeholder      {text-indent: -500px; transition: text-indent 0.3s ease;}
  
  .uitextbox {
    display: table;
  }
  
  .clearbutton {
      outline: none;
      border: none;
      background: none;
      position: absolute;
      margin-right: 25px;
      margin-top: 2.5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;Test&lt;/title&gt;
          &lt;link rel="stylesheet" href="index.css"&gt;
          &lt;script src="index.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="uitextbox"&gt;
              &lt;input class="clearable" type="text" placeholder="Search"/&gt;
              &lt;button class="clearbutton"&gt;&lt;img src="icon.svg" width="15" height="15"&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>UPD: Wow, that's working. Okay, but my first problem it's a position of button. She's isn't inside a box. My second problem it's what button is visible when box value is empty. However, I think, I can solve it. My third problem it's a decoration. I know how to get element fading effect. But, I don't know, how to do that on a button and box's text. And my hands is growing up out of the wrong place. For some reason I can't use external js file and when I using script inside of the html file, then it's working. May there some problems with my workspace? ._.-.</p>
  
  <p><a href="https://i.stack.imgur.com/hxzim.png" rel="nofollow noreferrer">This is how looks my code</a></p>
  
  <p>.js file it's in the "js" folder, yeah</p>
  
  <p>When I use external js file, it doesn't works. So I can't follow picture, just because I haven't so much reputation.</p>
  
  <p>When I use js inside html, <a href="https://i.stack.imgur.com/1Cegb.gif" rel="nofollow noreferrer">it works</a>.</p>