How to make an input field unselectable

Question

How to make this input field unselectable? I have tried this but i can still select the text:

    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;
    }

<div class="capbg1">
                <input type="text" class="form-control2 pull-right" value="<?php echo $capcode2;?>" name="captcha" style="width: 29%;" disabled>
              </div>

When i put the text in the div without the input field it works. What am i doing wrong here?

May you are finding this:- https://stackoverflow.com/questions/2310734/how-to-make-html-text-unselectable — GameChanger, Jan 20 '19 at 12:28

doğukan · Answer 1 · 2019-01-20T12:40:45.640

10

Or, you can use pointer-events:none

    input {
      border-radius: 10px;
      width: 100%;
      padding: 6px 20px;
      margin: 2px 0;
      box-sizing: border-box;
      border: 2px solid #555;
      outline: none;
      pointer-events: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;
    }

<div class="capbg1">
                <input type="text" class="form-control2 pull-right" value="<?php echo $capcode2;?>" name="captcha" style="width: 29%;" disabled>
              </div>

edited Jan 20 '19 at 12:40

answered Jan 20 '19 at 12:23

doğukan

23,073
13
57
69

3

Note that you can still tab into the input field. – Aram Kocharyan May 13 '20 at 07:17
This prevents focusing without using tab unless I'm mistaken. – cmcnphp Mar 14 '22 at 04:27

score 0 · Answer 2 · answered Jan 20 '19 at 18:30

You Can put the <input.../> in a <label>, then use a pseudo elements :before or :after as a transparent layer on your InputBox, then add user-select: none; to the <label>. Don't forget to set the z-index.

    .capbg1 label {
        width: 50%;
        height: 100%;
        display: inline-block;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        padding: 6px 20px;
        margin: 2px 0;
        box-sizing: border-box;
        border: 2px solid #555;

        /* user-select none */
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
    }

    .capbg1 label:after {
        top: 0px;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        background: tranparent;
        content: "";

        display: block;
        z-index: 999;
    }

    input {
        position: relative;
        outline: none;
        display: inline-block;
        border: none;
        z-index: 1;
    }

    input:focus {
        border-radius: 10px;
        border: 2px solid #555;
        border-color: red;
    }

<div class="capbg1">
    <label>
        <input type="text" class="form-control2 pull-right" value="<?php echo $capcode2;?>" name="captcha" disabled>
    </label>
</div>

How to make an input field unselectable

2 Answers2

Linked