如何使输入字段不可选答案

【问题标题】：How to make an input field unselectable如何使输入字段不可选
【发布时间】：2019-06-14 00:56:48
【问题描述】：

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

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

【问题讨论】：

希望你能找到这个：- stackoverflow.com/questions/2310734/…

标签： html css

【解决方案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>

【讨论】：

请注意，您仍然可以使用 Tab 键进入输入字段。

【解决方案2】：

您可以将<input.../> 放在<label> 中，然后使用伪元素:before or :after 作为 InputBox 上的透明层，然后将user-select: none; 添加到<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;
    }

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

【讨论】：