css设置input不可编辑

在CSS中，如果你想让`<input>`元素看起来不可编辑但实际上仍然可以接收焦点（例如密码输入框），你可以通过设置`pointer-events`属性为`none`来隐藏点击效果，并使用`:focus`伪类来保持样式的一致性，同时禁用`readonly`属性，因为这将完全阻止用户输入。以下是示例代码：

input[type="password"] {
  /* 隐藏点击并禁止鼠标交互 */
  pointer-events: none;
  appearance: none; /* 对于现代浏览器，去除默认样式 */

  /* 仅当元素获得焦点时显示样式 */
  &:focus {
    outline: none; /* 去除默认聚焦边框 */
    background-color: lightgray; /* 可自定义聚焦时的背景色 */
    pointer-events: auto; /* 焦点时允许交互 */
  }

  /* 禁止直接文本输入 */
  contenteditable: false;
  user-select: none;
}

相关问题

input设置灰色不可编辑

要将 input 元素设置为灰色且不可编辑，您可以使用以下 CSS 样式：

input[readonly] {
  background-color: #ccc;
}

这将将带有 readonly 属性的所有 input 元素的背景颜色设置为灰色。要使 input 元素不可编辑，您可以将其设置为只读（readonly）状态，如下所示：

<input type="text" value="Hello World" readonly>

这将使输入框中的文本不可编辑，并将其背景颜色设置为灰色。请注意，只读属性不是 HTML5 的必需属性，但几乎所有浏览器都支持它。如果您需要更大的浏览器兼容性，请考虑使用 JavaScript 来禁用输入框。

css设置所有输入框都不可编辑

要设置所有输入框都不可编辑，可以使用 CSS 全局样式。可以在全局 CSS 文件中添加以下样式：

input {
  pointer-events: none;
  background-color: #f5f5f5;
  cursor: not-allowed;
}

这会将所有的 input 标签设置为不可编辑状态。`pointer-events: none;` 属性将禁用鼠标事件，使得无法对输入框进行鼠标操作。`background-color: #f5f5f5;` 属性将修改输入框的背景颜色，使得输入框看起来像是只读的。`cursor: not-allowed;` 属性将修改鼠标指针的样式，使得当鼠标移到输入框上时，指针变为禁止符号。

注意，这里的 CSS 样式会将所有的 input 标签都设置为不可编辑状态，包括文本输入框、密码输入框、复选框等等。如果你只想禁用某些特定类型的输入框，可以根据它们的类名或者其他属性进行选择器定位，并为它们设置相应的样式。