如何从css设置文本框的只读属性答案

【问题标题】：How to set readonly property of textbox from css如何从css设置文本框的只读属性
【发布时间】：2015-04-21 01:44:20
【问题描述】：

我创建了类似的css代码

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

但它不起作用。虽然如果我使用 1px 的字体大小，那么通过使用选项卡我可以访问该文本框并可以更改它的值。

有没有办法只使用 css 将文本框设为只读..

【问题讨论】：

标签： css

【解决方案1】：

对于现在来回答这个问题的人。您现在可以使用

pointer-events: none;

【讨论】：

即使我使用 css 将其禁用，我仍然可以对其进行编辑。
完全正确。可以使用标签按钮访问它。

【解决方案2】：

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

【讨论】：

【解决方案3】：

我同意 rowland 但您可以将其设置为不可编辑：

.inputHide {
    display: none;
}

虽然这使它脱离了流程（因此元素的明显移动以填补文本框左侧的空白）。

这种方法使它完全不可见和不可编辑...不仅仅是可见和变灰（就像 HTML “禁用”或“只读”属性会做的那样）。

【讨论】：

这不是正确的答案。如果你设置 display none，它就会变成透明元素，并给下一个 dom 元素自己的位置。您不能使用 css 设置只读属性。它仅适用于 javascript。附加信息：nodeElement.setAttribute("propertyName", "value"); input.setAttribute(readonly, true);

【解决方案4】：

Readonly 不是 STYLE 属性。所以你不能用 CSS（层叠样式表）设置。

【讨论】：

【解决方案5】：

css 不能用于只读输入。您可以使用 jquery 或简单的 javascript 来更改字段的属性。

【讨论】：

【解决方案6】：

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

        }
    });

【讨论】：