我需要什么样的CSS样式才能使readonly文本框控件看起来禁用

Question

只是为了先发制人'你为什么要这样做'回复以下是我正在做的事情：

如果单击另一个控件，我会进行ajax调用以获取服务器生成的值并将其填入文本框中。然后，在客户端，将控件设置为readOnly（我不想控制被禁用，因为我需要它来回发，所以我设置了readOnly属性。）

不幸的是，readOnly它不会看起来'禁用'

我希望通过执行.addClass来获取禁用的文本框。

我已经习惯了各种各样的风格，但我并没有接近那种风格。

顺便说一句，这将是IE浏览器（可能是IE7或更低，因此我不担心大纲样式）。

感激地收到任何想法。

Answer 1

最好的方法是以正常方式禁用文本框然后拍摄页面的屏幕截图并将其加载到图像编辑器程序中并获取文本框背景颜色，边框颜色等。然后您可以通过像这样的CSS：

input.readOnlyTextBox
{
    background-color: #F2F2F2 !important;
    color: #C6C6C6;
    border-color: #ddd;
}

请记住，虽然禁用的外观在浏览器与浏览器之间可能会略有不同，但这会让您看到近似的禁用外观。

Answer 2

禁用的表单元素从浏览器到浏览器看起来不同。如果您不希望您的网站看起来不一致和草率，那么您应该设置所有输入元素的样式，或至少所有复选框 - 启用，禁用和只读。然后，您可以确定只读输入的内容，而无需尝试匹配四个或五个不同的浏览器。

Answer 3

  

我不想控制被禁用，因为我需要它回发所以我设置了readOnly属性

将其设置为已禁用，并使用相同的名称创建一个隐藏输入，该输入包含相同的值以进行实际提交。

这是一个黑客攻击，但是你可以在所有浏览器中可靠地获得正确的“禁用”外观的唯一方法就是真正使用“禁用”。样式在平台，浏览器，设置和主题之间过于不一致，因此您无法可靠地重现它。

Answer 4

我可以想到两种方式。

1. 使用CSS定位在字段顶部放置一个“虚拟”禁用字段。这样它就可以匹配浏览器使用的任何样式。如果用户点击它，他们就会点击禁用的字段。
2. 与＃1类似，使用隐藏字段提交值。 “显示”字段只是一个用于显示目的的额外字段，可以禁用/启用，并在数据处理时被忽略。

Answer 5

我刚玩过它。我正在使用JS和JQuery禁用输入项。在表单上，​​我有一个带有“disabler”类的复选框和将被禁用标记为“disableable”类的项目。
面对与你相同的问题，并解决了使用JQuery DOM操作即时放置和移除隐藏字段。在浏览器中工作正确 此函数与disabler.onClick和form.onLoad：

绑定

$.My.InitDisabler = function() {
    if (!$('.disabler').attr('checked')) {
        $('.disableable').each(function() {
            $(this).attr("disabled", "true");
            var templ = '<input name="{0}" type="hidden" value="{1}" class="disable_hdn" />';
            $(this).after($.format(templ, $(this).attr("name"), $(this).val()));
        });
    }
    else {
        $('.disable_hdn').remove();
        $('.disableable').removeAttr("disabled");
    }
}

Answer 6

我在相关answer上发现了此评论：

  

要像“禁用”字段一样将“readonly”输入字段设置为LOOK，请设置'style =“color：gray; background-color：＃F0F0F0;”'。 - Dan Nissenbaum 2011年2月28日5:05

我试过了，它完美无缺！

总结一下：

style="color: grey; background-color: #F0F0F0;"

Answer 7

我知道这已经得到了解答，但想给我的CSS示例。

因为当我在寻找解决方案时，如何设置输入字段的样式以使其看起来像被禁用，我总是得到一个类似于此的输入字段。

边界左边＆amp;顶部颜色较深等 所以使用这个CSS代码解决了它。

input[readonly]{
  border-color: darkgrey;
  border-style: solid;
  border-width: 1px;
  background-color: rgb(235, 235, 228);
  color: rgb(84, 84, 84);
  padding: 2px 0px;
}

制作jsfiddle所以你们可以仔细看看。

在Chrome上看起来很不错，在其他浏览器上你需要修改颜色abit。就像在Firefox中一样，你也需要将颜色和背景颜色改为等。

background-color: rgb(240, 240, 240);
color: rgb(109, 109, 109);