CODEWITHSUNDEEP
htmlcss
Jasper Schellekens
Jasper Schellekens

Reputation: 61

How to make an input field unselectable

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?

Upvotes: 5

Views: 27696

Answers (2)

Obaid
Obaid

Reputation: 426

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>

Upvotes: 0

doğukan
doğukan

Reputation: 27381

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>

Upvotes: 15

Related Questions