是否可以通过CSS使输入字段只读？ [英] Is it possible to make input fields read-only through CSS?

问题描述

我知道输入元素是通过应用 readonly 布尔属性而成为只读的，并且是一个属性，它不受CSS的影响。

I know that input elements are made read-only by applying the readonly boolean attribute, and being an attribute it is not affected by CSS.

另一方面，我的场景似乎是一个非常适合CSS，所以我希望有一种CSS技巧让我这样做。我的表单上有一个可打印版本超链接。单击它将显示文档的可打印版本。它主要是CSS的东西，我的print.css看起来像这样：

On the other hand, my scenario seems to be a very good fit for CSS, so I was hoping there is some kind of a CSS trick to let me do it. I have a printable version hyperlink on my form. Clicking it displays a ... printable version of the document. It is mostly CSS stuff, my print.css looks like this:

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作品，例如：

There are also a few javascript pieces, such as:

• 将打印类添加到html元素


• 显示没有滚动条的表格


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

• Adding the print class to the html element
• Displaying tables without scroll bars
• A few other minor things, like hiding any popup overlays.

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

My current problem is input fields. They should be read-only, however, I have no idea how to do it with minimum changes to the code. CSS could be a perfect solution.

任何想法？

推荐答案

只有CSS？通过使用 用户定义的文本输入，选择：无 ：

With CSS only? This is sort of possible on text inputs by using user-select:none:

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

JSFiddle示例 。

这很值得注意， a href =http://caniuse.com/#search=user-select =noreferrer>浏览器不支持CSS3或支持用户选择属性。 readonly 属性应该理想地给予你希望被readonly的输入标记，但这是工作作为一个黑客的CSS替代。

It's well worth noting that this will not work in browsers which do not support CSS3 or support the user-select property. The readonly property should be ideally given to the input markup you wish to be made readonly, but this does work as a hacky CSS alternative.

使用JavaScript：

With JavaScript:

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

修改：CSS方法在Chrome中不再有效（29）。 -webkit-user-select 属性现在似乎在输入元素上被忽略。

The CSS method no longer works in Chrome (29). The -webkit-user-select property now appears to be ignored on input elements.

这篇关于是否可以通过CSS使输入字段只读？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！