title: How to make an input field unselectable
body: <p>How to make this input field unselectable?
  I have tried this but i can still select the text:</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-css lang-css prettyprint-override"><code>    input {
        border-radius: 10px;
        width: 100%;
        padding: 6px 20px;
        margin: 2px 0;
        box-sizing: border-box;
        border: 2px solid #555;
        outline: none;
      }
      
      input:focus {
        border-radius: 10px;
        border: 2px solid #555;
        border-color: red;
      }
      
      div.capbg1 {
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="capbg1"&gt;
                  &lt;input type="text" class="form-control2 pull-right" value="&lt;?php echo $capcode2;?&gt;" name="captcha" style="width: 29%;" disabled&gt;
                &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>When i put the text in the div without the input field it works. What am i doing wrong here?</p>