是否可以通过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.

我知道，通过应用readonly boolean属性，输入元素是只读的，作为属性，它不受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:

另一方面，我的场景似乎非常适合CSS，所以我希望有某种CSS技巧可以让我这么做。我的表单上有一个可打印的版本超链接。点击它显示一个…文件的可打印版本。主要是CSS的东西，我的印刷品。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;
}

There are also a few javascript pieces, such as:

还有一些javascript片段，如:

Adding the print class to the html element
向html元素添加打印类
Displaying tables without scroll bars
显示没有滚动条的表
A few other minor things, like hiding any popup overlays.
还有一些小事情，比如隐藏任何弹出窗口覆盖。

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可能是一个完美的解决方案。

Any ideas?

什么好主意吗?

8 个解决方案

#1

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

用CSS只?这在文本输入中是可行的，使用用户选择:none:

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

JSFiddle example.

JSFiddle例子。

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.

值得注意的是，这在不支持CSS3或不支持用户选择属性的浏览器中是行不通的。readonly属性应该理想地提供给您希望使其为readonly的输入标记，但这确实可以作为一种hacky CSS替代。

With JavaScript:

使用JavaScript:

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

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

编辑:CSS方法不再适用于Chrome(29)。现在，在输入元素上，-webkit-user-select属性将被忽略。

#2

It is not (with current browsers) possible to make an input field read-only through CSS alone.

仅通过CSS就不可能(在当前浏览器中)使输入字段成为只读的。

Though, as you have already mentioned, you can apply the attribute readonly='readonly'.

但是，正如您已经提到的，您可以应用属性readonly='readonly'。

If your main criteria is to not alter the markup in the source, there are ways to get this in, unobtrusively, with javascript.

如果您的主要标准是不更改源代码中的标记，那么有一些方法可以不引人注目地使用javascript实现这一点。

With jQuery, this is easy:

使用jQuery，这很容易:

 $('input').attr('readonly', 'readonly');

Or even with plain Javascript:

甚至使用简单的Javascript:

document.getElementById('someId').setAttribute('readonly', 'readonly');

#3

Not really what you need, but it can help and answser the question here depending of what you want to achieve.

这不是你真正需要的，但它可以帮助你回答这个问题，取决于你想要实现什么。

You can prevent all pointer events to be sent to the input by using the CSS property : pointer-events:none It will kind of add a layer on top of the element that will prevent you to click in it ... You can also add a cursor:text to the parent element to give back the text cursor style to the input ...

通过使用CSS属性:pointer-events:none，您可以防止所有的指针事件被发送到输入端。您还可以向父元素添加一个游标:text，以将文本游标样式返回到输入……

Usefull, for example, when you can't modify the JS/HTML of a module.. and you can just customize it by css.

例如，当您无法修改模块的JS/HTML时，可以使用Usefull .你可以通过css来定制它。

JSFIDDLE

#4

This is not possible with css, but I have used one css trick in one of my website, please check if this works for you.

这在css中是不可能的，但是我在我的一个网站上使用了一个css技巧，请检查这是否适合你。

The trick is: wrap the input box with a div and make it relative, place a transparent image inside the div and make it absolute over the input text box, so that no one can edit it.

诀窍是:使用div将输入框包装起来，使其相对，在div中放置一个透明的图像，并使其在输入文本框中成为绝对的，这样就没有人可以编辑它。

css

.txtBox{
    width:250px;
    height:25px;
    position:relative;
}
.txtBox input{
    width:250px;
    height:25px;
}
.txtBox img{
    position:absolute;
    top:0;
    left:0
}

html

<div class="txtBox">
<input name="" type="text" value="Text Box" />
<img src="http://dev.w3.org/2007/mobileok-ref/test/data/ROOT/GraphicsForSpacingTest/1/largeTransparent.gif" width="250" height="25" alt="" />
</div>

jsFiddle File

jsFiddle文件

#5

No behaviors can be set by CSS. The only way to disable something in CSS is to make it invisible by either setting display:none or simply putting div with transparent img all over it and changing their z-orders to disable user focusing on it with mouse. Even though, user will still be able to focus with tab from another field.

CSS不能设置任何行为。在CSS中禁用某些内容的唯一方法是通过设置显示使其不可见:none或简单地在其上放置带有透明img的div并更改其z命令以禁用用户对其进行鼠标聚焦。尽管如此，用户仍然可以从另一个字段集中tab。

#6

You don't set the behavior of controls via CSS, only their styling.You can use jquery or simple javascript to change the property of the fields.

您不需要通过CSS设置控件的行为，只需设置控件的样式即可。您可以使用jquery或简单的javascript来更改字段的属性。

#7

Why not hide the input element and replace it with a label element with the same content?

为什么不隐藏输入元素并将其替换为具有相同内容的标签元素?

I puzzled over how the React TODOMVC app accomplished this same thing and this is the strategy they came up with.

我搞不懂React TODOMVC应用程序是怎么做到这一点的，这就是他们想出的策略。

To see it in action, check out the app below, and watch the CSS properties of the TODO items when you double click them and then click away.

要查看它的实际操作，请查看下面的应用程序，并在双击TODO项并单击它们时查看它们的CSS属性。

http://todomvc.com/examples/react-backbone/#/

http://todomvc.com/examples/react-backbone/ /

When you render the page you can have either an editable input, or a non-editable label with display:none; depending on your media query.

当您呈现页面时，您可以有一个可编辑的输入，或者一个带有显示的不可编辑的标签:none;取决于你的媒体查询。

#8

-10

Hope this will help.

希望这将帮助。

    input[readonly="readonly"]
{
    background-color:blue;
}

reference:

参考:

http://jsfiddle.net/uzyH5/1/

#1