css中input不可选中

您可以使用CSS的user-select属性来禁止用户选择输入框中的文本，例如：

input {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

这将禁止用户在输入框中选择和复制文本。请注意，这只是针对用户的选择行为，对于JavaScript等程序仍然可以访问输入框中的文本。

相关问题

如何设置一个vue的前端界面的所有输入框el-input都不可选

要设置一个vue的前端界面的所有输入框el-input都不可选，可以使用CSS样式来实现。可以在全局CSS文件中设置以下样式：

.el-input input {
  pointer-events: none;
}

这会将所有`.el-input`类下的输入框的`pointer-events`属性设置为`none`，使其无法被选中。如果你只想禁用一部分输入框，可以为这些输入框添加一个特定的类，并在CSS中设置相应的样式。

另外，你也可以在el-input组件中添加`disabled`属性，这会将输入框设置为禁用状态，用户无法输入任何内容。例如：

<el-input v-model="inputValue" disabled></el-input>

这会将这个输入框设置为禁用状态，用户无法输入任何内容。

css 选座,纯html+css中实现静态选座位效果技巧（input+label使用小技巧）

要实现静态选座位效果，可以使用HTML的input和label元素结合使用的小技巧。

首先，我们可以使用input元素来创建座位的checkbox，然后使用label元素来包裹input元素，并且设置label元素的样式来表示座位。

例如，我们可以为label元素设置一个宽度和高度，以及一个背景颜色来表示座位的状态，比如已选或可选等。

接着，我们可以使用CSS中的伪类选择器来为不同状态的座位设置不同的样式，比如:hover或:checked等。

最后，我们可以使用CSS中的flexbox布局或者grid布局来排列座位，从而实现选座位效果。

下面是一个示例代码：

<div class="seat-map">
  <div class="seat-row">
    <label for="seat-1" class="seat available"></label>
    <input type="checkbox" id="seat-1" class="hidden" />
    <label for="seat-2" class="seat unavailable"></label>
    <input type="checkbox" id="seat-2" class="hidden" />
    <label for="seat-3" class="seat selected"></label>
    <input type="checkbox" id="seat-3" class="hidden" />
  </div>
  <div class="seat-row">
    <label for="seat-4" class="seat available"></label>
    <input type="checkbox" id="seat-4" class="hidden" />
    <label for="seat-5" class="seat available"></label>
    <input type="checkbox" id="seat-5" class="hidden" />
    <label for="seat-6" class="seat available"></label>
    <input type="checkbox" id="seat-6" class="hidden" />
  </div>
</div>

.seat-map {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  margin: 0 auto;
}

.seat-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.seat {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.available {
  background-color: #a3d2ca;
}

.selected {
  background-color: #f9d6c1;
}

.unavailable {
  background-color: #d9d9d9;
  cursor: not-allowed;
}

.hidden {
  display: none;
}

/* 当鼠标放在座位上时，改变座位的颜色 */
.seat:hover {
  background-color: #f1a7a7;
}

/* 当座位被选中时，改变座位的颜色 */
:checked + .seat {
  background-color: #f1a7a7;
}

/* 当座位不可用时，改变座位的颜色 */
:disabled + .seat {
  background-color: #d9d9d9;
  cursor: not-allowed;
}

在这个示例代码中，我们使用了flexbox布局来排列座位，并且为不同状态的座位设置了不同的样式。通过使用伪类选择器和:checked选择器，我们可以在座位被选中或鼠标放在座位上时改变座位的颜色。