如何使输入字段不可选择

Question

如何使此输入字段不可选择？ 我已经尝试过了，但是我仍然可以选择文本：

    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> 

当我将文本放在没有输入字段的div中时，它将起作用。我在这里做什么错了？

Answer 1

或者，您可以使用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> 

Answer 2

您可以将<input.../>放在<label>中，然后使用伪元素:before or :after作为InputBox上的透明层，然后将user-select: none;添加到{{1 }}。不要忘记设置<label>。

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