是否可以通过CSS使输入字段为只读？

我知道输入元素是通过应用readonly布尔属性进行的只读属性，它是一个不受CSS影响的属性。是否可以通过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可能是一个完美的解决方案。

任何想法？

来源

2013-05-29 mark

对于可打印版本，您可以不只是将属性添加到html标记？ – Pete

不要以为这是可能的CSS。CSS是用于造型的。 – sroes

这并不回答这个问题，但为什么不使用像@media print这样的媒体查询来制作一个适合打印的版本呢？ – PLPeeters

仅限CSS？这通过使用user-select:none是在文本输入排序的可能：

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

JSFiddle example。

值得注意的是，这在browsers which do not support CSS3 or support the user-select property中不起作用。 readonly属性应理想地给予您希望只读的输入标记，但这确实可以作为一种可靠的CSS替代方法。

使用JavaScript：

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

编辑： CSS的方法不再在Chrome（29）的作品。输入元素现在似乎忽略了-webkit-user-select属性。

来源

2013-05-29 10:17:53

太棒了，这对我来说已经足够了。 – mark

我正在寻找类似的东西。并感谢您的答案。但是我在小提琴中发现了一个问题。当我们关注它并按下删除按钮时，文本区域被删除。有没有解决方案？我正在使用mozilla firefox – Rohith

@Rohith这在Chrome中似乎不成问题。正如我所提到的，理想情况下，只读属性应该被赋予元素（通过直接标记修改或JavaScript）。 –

没有行为可以由CSS设置。在CSS中禁用某些东西的唯一方法是通过设置display:none或者简单地将透明img放在它上面并更改它们的z顺序来禁用用户使用鼠标对其进行关注来使其不可见。尽管如此，用户仍然可以使用其他字段的选项卡进行关注。

来源

2013-05-29 10:13:10

它不是（用当前的浏览器）可以通过CSS来使输入字段只读。

尽管如前所述，您可以应用属性readonly='readonly'。

如果您的主要标准是不改变源代码中的标记，有方法可以用javascript轻松获得此代码。

使用jQuery，这是很容易：

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

甚至与普通的JavaScript：

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

来源

2013-05-29 10:19:34 Faust

查询1.9+，使用'$（''）.prop（'readyonly'，true）;' – NuclearPeon

几个拼写错误，查询1.9+应该是'$（'input'）。prop（'readonly '，true）;' –

-10

希望这会有所帮助。

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

参考：

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

来源

2013-05-29 10:19:57 RachithaS

这是如何解决OP的问题的？ – ASGM

你在说什么？你生气吗？ – RachithaS

您在HTML中分配'readonly'属性并使用CSS引用它。如果我正确地解释它，OP正在寻找使用CSS来分配“只读”或类似行为。 – ASGM

你不通过CSS设置控件的行为，只有他们styling.You可以使用jquery或简单javascript更改的字段的财产。

来源

2013-05-29 10:22:38 sAnS

这是不可能与CSS，但我已经在我的网站之一使用了一个CSS技巧，请检查这是否适合你。

诀窍是：用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

来源

2013-05-29 10:43:18

唉，它不是只读的。您可以通过Tab键访问文本框。 – Eric

@Eric，是的它是真实的，我只用一个css技巧来实现这个目标，在这个阶段这是不可能的。 –

为什么不隐藏输入元素，并与具有相同内容的标签元素取代它呢？

我对React TODOMVC应用程序如何完成同样的事情感到困惑，这是他们提出的策略。

要在动作中看到它，请检查下面的应用程序，并在双击它们然后单击时观察TODO项目的CSS属性。

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

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

来源

2015-04-29 20:59:45