如何使输入框不可选

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中时，它可以正常工作。这里我做错了什么？

- Jasper Schellekens

---

你可能正在寻找这个链接：https://dev59.com/UXE95IYBdhLWcg3wb9db - undefined

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> 

- doğukan

---

请注意，您仍然可以通过按制表键进入输入字段。 - undefined

这可以防止无法使用标签进行聚焦，除非我搞错了。 - undefined

Answer 2

可以将<input.../>放在一个<label>中，然后使用伪元素:before或:after作为透明层覆盖在你的InputBox上，接着给<label>添加user-select: none;。别忘了设置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>

- Obaid