Question

我知道输入元素是通过应用readonly布尔属性而成为只读的，并且是一个不受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可能是一个完美的解决方案。

有什么想法吗？

Answer 1

仅限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属性应该是您希望只读取的输入标记，但这确实可以作为一种hacky CSS替代方案。

使用JavaScript：

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

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

Answer 2

不能（使用当前浏览器）仅通过CSS将输入字段设置为只读。

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

如果您的主要标准是不改变源代码中的标记，可以通过javascript以不显眼的方式获取此标记。

使用jQuery，这很容易：

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

甚至使用简单的Javascript：

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

Answer 3

不是你真正需要的东西，但它可以根据你想要达到的目的来帮助和回答这个问题。

您可以使用CSS属性阻止所有指针事件发送到输入：pointer-events:none 它会在元素的顶部添加一个层，阻止你点击它... 您还可以向父元素添加cursor:text以将文本光标样式返回给输入...

有用，例如，当你无法修改模块的JS / HTML时......你可以通过css自定义它。

JSFIDDLE

Answer 4

这对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

Answer 5

CSS无法设置任何行为。在CSS中禁用某些内容的唯一方法是通过设置display:none或简单地将透明img放在div上并更改其z-order以禁止用户使用鼠标聚焦它来使其不可见。即使用户仍然可以使用其他字段中的标签进行聚焦。

Answer 6

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

Answer 7

HTML中的read-only属性用于创建不可编辑的文本输入。但对于CSS，pointer-events属性用于停止指针事件。

语法：

pointer-events: none;

示例：该示例显示了两个输入文本，其中一个不可编辑。

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            Disable Text Input field 
        </title> 

        <style> 
        .inputClass { 
            pointer-events: none; 
        } 
        </style> 
    </head> 

    <body style = "text-align:center;">
        Non-editable:<input class="inputClass" name="input" value="NonEditable"> 

        <br><br> 

        Editable:<input name="input" value="Editable"> 
    </body> 
</html>

Answer 8

基于CSS的输入文本只读更改选择的颜色：

CSS：

/**default page CSS:**/
::selection { background: #d1d0c3; color: #393729; }
*::-moz-selection { background: #d1d0c3; color: #393729; }

/**for readonly input**/
input[readonly='readonly']:focus { border-color: #ced4da; box-shadow: none; }
input[readonly='readonly']::selection { background: none; color: #000; }
input[readonly='readonly']::-moz-selection { background: none; color: #000; }

HTML：

<input type="text" value="12345" id="readCaptch" readonly="readonly" class="form-control" />

实时示例： https://codepen.io/alpesh88ww/pen/mdyZBmV

您还可以看到我为什么成功！！（php captcha）： https://codepen.io/alpesh88ww/pen/PoYeZVQ

Answer 9

希望这会有所帮助。

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

参考：

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

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

9 个答案:

基于CSS的输入文本只读更改选择的颜色：