是否可以通过CSS将输入字段设置为只读？

  • Z时代
  • 2024-01-10
  • 分类：问答

我知道通过应用readonlyboolean属性将输入元素设为只读，并且该属性不受CSS的影响。

另一方面，我的情况似乎非常适合CSS，因此我希望可以使用某种CSS技巧来实现。我的表格上有 可打印的版本

超链接。单击它会显示文档的可打印版本。它主要是CSS东西，我的print.css看起来像这样：

html.print {
    width: 8.57in;
}
.print body {
    font: 9pt/1.5 Arial, sans-serif;
    margin: 0 1in;
    overflow: auto;
}
.print #header, .print #footer {
    display: none;
}
.print .content {
    background-color: white;
    overflow: auto;
}
.print .fieldset > div.legend:first-child {
    background: white;
}
.print ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: transparent;
}
.print :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: transparent;
}
.print ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: transparent;
}
.print :-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: transparent;
}
.print .check-mark {
    display: inline;
}
.print input[type=checkbox] {
    display: none;
}
.print .boolean-false {
    display: none;
}

还有一些javascript片段，例如：

  • 将print类添加到html元素

  • 显示没有滚动条的表

  • 其他一些小事情，例如隐藏任何弹出窗口叠加层。

我当前的问题是输入字段。它们应该是只读的，但是，我不知道如何以最少的代码更改来做到这一点。CSS可能是一个完美的解决方案。

有任何想法吗？

回答：

仅使用CSS？使用user-select:none以下命令可以在文本输入上实现：

.print {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;          
}

值得注意的是，这在不支持CSS3或不支持user-selectproperty的浏览器中将不起作用。readonly理想情况下，应将该属性提供给希望将其设置为只读的输入标记，但这确实可以作为CSS的替代方法。

使用JavaScript：

document.getElementById("myReadonlyInput").setAttribute("readonly", "true");

CSS方法在Chrome（29）中不再起作用。-webkit-user-select现在，该属性似乎在输入元素上被忽略。

以上是 是否可以通过CSS将输入字段设置为只读？ 的全部内容， 来源链接： utcz.com/qa/400672.html

回到顶部