所以我有一个文本输入
<input type="text" value="3" class="field left">
这是我的CSS
background:url("images/number-bg.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
height:17px;
margin:0 13px 0 0;
text-align:center;
width:17px;
有没有设置或技巧，我正在考虑做一个标签，但样式怎么样。我如何转换它们，有更好的方法还是唯一的方法？
<input type="text" value="3" class="field left" readonly>
不需要造型。
参见<input>MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes
您可以将属性添加readonly到输入：
<input type="text" value="3"
class="field left" readonly="readonly">
readonly如果您只想读取输入，则可以使用属性。如果您想显示输入但完全禁用，您可以使用disabled属性（即使像 PHP 这样的处理语言也无法读取这些）。
只是为了完成可用的答案：
输入元素可以是只读的或禁用的（它们都不可编辑，但有一些区别：焦点，...）
可以在这里找到很好的解释：
HTML 表单输入字段的 disabled=“disabled” 和 readonly=“readonly” 有什么区别？
如何使用：
<input type="text" value="Example" disabled />
<input type="text" value="Example" readonly />
还有一些解决方案可以通过 CSS 或 JavaScript 来实现，如此处所述。
<input type="text" value="3" class="field left" readonly>
您可以在https://www.w3schools.com/tags/att_input_readonly.asp中看到
设置“只读”的方法：
$("input").attr("readonly", true)
取消“只读”（在 jQuery 中工作）：
$("input").attr("readonly", false)
添加readonly：
<input type="text" value="3" class="field left" readonly>
如果您不希望在表单中提交值，请添加disabled属性。
<input type="text" value="3" class="field left" disabled>
没有办法使用始终有效的 CSS。
为什么？CSS 不能“禁用”任何东西。您仍然可以关闭显示或可见性并使用pointer-events: none，但pointer-events不适用于早于 IE 11 的 IE 版本。
你只需要在最后添加禁用
<input type="text" value="3" class="field left" disabled>
如果您真的想使用CSS，请使用以下属性，这将使字段不可编辑。
pointer-events: none;
每个输入都必须具有只读或可编辑字段，因此请使用它