如何使用CSS设置文本框的只读属性

Question

我创建了如下的CSS代码：

.inputHide {
    font-size       : 100px;
    width           : 100px;
    height          : 100px;
    border          : none;
    background      : transparent;
    readonly        : true;
}

但它不起作用。虽然如果我使用1像素的字体大小，那么通过使用制表符，我可以访问该文本框并更改其值。

有没有办法只使用CSS使文本框只读。

- PHP Ferrari

Answer 1

对于现在看到这个答案的人们，你现在可以用以下方法实现

pointer-events: none;

- J D

---

即使我使用CSS将其禁用，我仍然可以通过Tab键进入并编辑它。 - Kiran Kumar

确切地说，它可以通过按Tab键来访问。 - saibbyweb

Answer 2

您无法通过CSS设置控件的行为，只能设置它们的样式 - 如果您需要将其设置为只读，请在实际控件上标记它。

- Rowland Shaw

Answer 3

我同意Rowland的看法，但您可以使用以下方法将其设置为不可编辑:

.inputHide {
    display: none;
}

尽管这会使元素移动以填补文本框留下的空白区域，但这将使其脱离流程。

这种方法使其完全不可见和不可编辑...而不仅仅是可见但灰色（就像HTML中“disabled”或“readonly”属性所做的那样）。

- David

---

这不是正确的答案。如果你设置display none，它会变成透明元素，并为下一个dom元素腾出位置。你不能使用css设置readonly属性，只能使用javascript。附加信息： nodeElement.setAttribute("propertyName", "value"); input.setAttribute(readonly, true); - Руслан

Answer 4

只读（Readonly）不是一个样式属性（STYLE attribute）。因此你不能使用 CSS（层叠样式表，Cascading Style Sheet）来设置。

- Ionuț Staicu

Answer 5

$("select").selectize({
        onInitialize: function() {
            this.$control_input.attr("readonly","readonly");

        }
    });

- Johnaxe

Answer 6

CSS 不能用于将输入设置为只读。您可以使用 jQuery 或简单的 JavaScript 更改字段的属性。

- Jacob K