在前端开发过程中，input 元素是最常用的表单控件之一。而在一些特殊情况下，我们需要限制用户对 input 元素进行修改，这时候我们通常会想到设置 input 元素的css 属性来实现这个需求，但实际上，这并不是可行的方案。
在 CSS 中，确实有一些相关的属性可以被用来控制 input 元素的行为和样式，如 disabled 和 readonly 属性。但这些属性本质上并不是修改 input 元素的CSS 属性，而是改变其允许的交互方式，达到禁止或只读的效果。
我们常常会尝试使用 CSS 属性来实现 input 不可编辑的需求，比如：
input {
pointer-events: none;
user-select: none;
color: gray;
background-color: #fafafa;
}这样的 CSS 代码看起来很直接，但实际上却无效，因为 CSS 样式不能直接控制 input 元素中的值。无论你怎么设置，使用 input 元素的 value 属性都可以在 JavaScript 中被修改。
那么，为什么不能直接在 CSS 中修改 input 元素的样式和值？这和 input 元素的特性和用途有关。
立即学习“前端免费学习笔记（深入）”；
首先， input 元素的值应该是由用户自主输入或从其他来源获取，而程序员不应该因为自己的需求而强行修改它。因此，只能通过设置 input 的 disabled 或 readonly 属性来确保其值不被修改。
同时， input 元素在设计之初就被赋予了与众不同的语义。在网页中， input 是用于获取用户输入数据的控件，输入的数据会被发送到后台服务器进行处理。如果程序员可以直接控制 input 的样式和值，那么就可能出现一些难以预料的风险，比如：
- 恶意程序可能会使用 JavaScript 或浏览器扩展来篡改 input 的值，从而以用户的名义提交不当数据；
- 网站恶意攻击者可能会通过 CSS 攻击来隐藏输入数据，骗取用户信息；
- 维护困难：在面对样式和值同时受到修改限制的情况下，维护这些 input 元素将变得十分困难。
因此，我们基本不能直接修改 input 元素的值。但是，在某些必要的情况下，我们仍然可以通过代码实现 input 的不可编辑状态。这里介绍几种常见的实现方式：
- 使用 disabled 属性
disabled 属性是 input 控件自身具备的，通过设置它会使得 input 元素变为灰色，并且无法被修改。这是因为不可用控件不会响应任何交互事件，包括点击和键盘输入。这是一种非常安全，易于实现的方法。
<input type="text" id="myInput" disabled>
- 使用 readonly 属性
readonly 属性是另一种 input 控件自身具备的属性，和 disabled 相比，readonly 只是使 input 元素变成只读状态，并不会改变其外观。这意味着仍然可以使用 CSS 来修改 input 元素的样式，但是无法修改它的值。但是，该属性仅仅只影响用户，如果使用 JavaScript 或后端代码仍然可以修改值。
<input type="text" id="myInput" readonly>
- 使用 JavaScript 进行监控
最后一种方法是使用 JavaScript 来防止 input 元素的值被修改。在用户输入后，我们可以通过 JavaScript 来存储输入的值，并禁用 input 元素，这样即使用户再次点击，input 元素也无法被修改。
<input type="text" id="myInput" onkeyup="storeInputValue(this)" >
<script>
function storeInputValue(input) {
input.setAttribute('value', input.value);
input.setAttribute('disabled', 'disabled');
}
</script>在这种情况下，input 元素在输入值后立即变为不可用状态，用户无法再次修改其值。但是，需要注意的是，这不是一个非常完美的方案。
总结
通过上面的介绍，我们可以知道使用 CSS 属性来控制 input 元素的值不可编辑是无效的。虽然我们可以通过设置一些 input 控件自身具备的属性或者使用 JavaScript 监控 input 的方式来实现不可编辑的效果。但是这样做必须要慎重，因为 input 元素在设计之初就具备了极其重要的语义和功能，过度控制它们可能会产生意想不到的负面影响。
