Какой стиль CSS мне нужен, чтобы сделать элемент управления «только для чтения» отключенным

Question

Просто чтобы предупредить ответы «почему вы хотите это сделать» Вот что я делаю:

Если щелкнуть другой элемент управления, я выполняю ajax-вызов, чтобы получить сгенерированное сервером значение и вставить его в текстовое поле. Затем на стороне клиента я установил элемент управления на readOnly (я не хочу, чтобы элемент управления был отключен, поскольку мне нужно, чтобы он отправлял обратно, поэтому я устанавливаю атрибут readOnly).

К сожалению, как только для чтения, он не выглядит 'отключен'

Я бы хотел, чтобы это отключенное текстовое поле выглядело с помощью .addClass.

Я разбирался с различными стилями, но я не приблизился к тому, чтобы получить такой взгляд.

Кстати, это будет в IE (и может быть IE7 или ниже, поэтому я не боюсь стиля контура).

Любые идеи с благодарностью приняты.

Answer 1

Лучший способ - отключить текстовое поле обычным способом, затем сделать снимок экрана страницы и загрузить его в программу-редактор изображений и получить цвета текстового поля backgrond, цвета рамки и т. Д. Затем вы можете установить его с помощью CSS вроде так:

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

Помните, что отключенный вид может немного отличаться от браузера к браузеру, но это даст вам приблизительный отключенный вид.

Answer 2

Отключенные элементы формы выглядят по-разному от браузера к браузеру. Если вы не хотите, чтобы ваш сайт выглядел непоследовательным и неряшливым, вам следует стилизовать все элементы ввода или, по крайней мере, все свои флажки - включенные, отключенные и доступные только для чтения. Затем вы можете определить, как выглядит вход «только для чтения», не пытаясь сопоставить четыре или пять разных браузеров.

Answer 3

Я могу придумать два пути.

1. Поместите "фиктивное" отключенное поле поверх поля, используя позиционирование CSS. Таким образом, он соответствует стилю, который использует браузер. Если пользователь нажимает на него, он щелкает в отключенном поле.
2. Аналогично # 1, используйте скрытое поле для значения, которое будет отправлено. Поле «display» - это просто дополнительное поле для целей отображения, которое можно отключить / включить и игнорировать при обработке данных.

Answer 4

Я не хочу, чтобы управление было отключено, так как оно мне нужно для обратной передачи, поэтому я устанавливаю атрибут readOnly

Установите для него значение отключено и создайте скрытый вход с тем же именем, содержащим то же значение, для реальной отправки.

Это взлом, но единственный способ надежно получить правильный «отключенный» вид во всех браузерах - это действительно использовать «отключенный». Стиль слишком непоследователен для разных платформ, браузеров, настроек и тем, чтобы вы могли надежно воспроизвести его.

Answer 5

Я знаю это как ответ, но хотел привести мой пример CSS.

Поскольку, когда я искал решение, как оформить поле ввода таким образом, чтобы оно выглядело как отключенное, я всегда получал поле ввода, похожее на это.

с рамкой слева и сверху, имеющей более темный цвет и т. Д. Так что решил это с помощью этого кода 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);

Answer 6

Я нашел этот комментарий к связанному ответу :

Чтобы поле ввода «только для чтения» отображалось в виде LOOK, как поле «отключено», установите 'style = "color: grey; background-color: # F0F0F0;"'. - Дан Ниссенбаум 28 февраля 2011 года в 5:05

Я пробовал, и он отлично работает!

Подводя итог:

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

Answer 7

Я только что играл с ним. Я отключаю элементы ввода, используя 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");
    }
}