title: How do I position the file input button on the right hand side inside the textfield
body: <p>How do I position the file input button on the right hand side inside the textfield
  this is my fiddle
  <a href="http://jsfiddle.net/cancerian73/TurGw/" rel="nofollow noreferrer">http://jsfiddle.net/cancerian73/TurGw/</a></p>
  
  <p>this is how i want as attached a screen shot<img src="https://i.stack.imgur.com/EoZxA.jpg" alt="enter image description here"></p>
  
  <pre><code>input[type=file] {
  -webkit-appearance: textfield;
  position: relative;
  -webkit-box-sizing: border-box;
   }
   input[type=file]::-webkit-file-upload-button {
  width: 0;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  border: none;
   }
   /* "x::-webkit-file-upload-button" forces the rules to only apply to browsers that support this pseudo-element */
    x::-webkit-file-upload-button, input[type=file]:after {
  content:'Browse...';
  display: inline-block;
  left: 100%;
  margin-left:3px;
  position: relative;
  -webkit-appearance: button;
  padding: 3px 8px 2px;
   }
  </code></pre>