是否可以通过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?通过使用 用户选择:无 code>
:
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;
}
很值得注意的是,这不会在浏览器不支持CSS3或支持用户选择
属性。 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屋!