Ящики ввода с прозрачным фоном не изменяются в IE8

У меня есть абсолютно позиционированное поле ввода в форме. Поле ввода имеет прозрачный фон:

.form-page input[type="text"] {
    border: none;
    background-color: transparent;
    /* Other stuff: font-weight, font-size */
}

Удивительно, но я не могу выбрать это поле ввода, щелкнув по нему в IE8. Однако он отлично работает в Firefox. То же самое происходит при background: none. Когда я меняю цвет фона:

    background-color: red;

Он отлично работает, поэтому это проблема, связанная с прозрачным фоном. Установка границы позволяет выбрать поле ввода, щелкнув только по его границе.

Есть ли обходной путь, чтобы иметь интерактивное поле ввода с прозрачным фоном, работающим в IE8?

Обновление: Пример. Uncomment background-color и поле ввода выбирается. Вы также можете нажать на поле выбора и сфокусировать поле ввода, нажав Shift + Tab.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>

<style type="text/css">
  input[type="text"] {
    border: none;
    background: transparent;
    /*background-color: blue;*/
  }
  #elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
  #elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>

<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>

</body></html>

Ответы

Ответ 1

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

Отличается ли настройка background-image? Как насчет прозрачного GIF?

ETA: Любопытно! Это на самом деле ошибка IE7. Для меня ваш пример демонстрирует описанное поведение в IE7, но в IE8 это только в режиме EmulateIE7; в исходном рендеринге IE8 он исправлен. Обычно вам нужно убедиться, что вы не возвращаетесь к рендерингу IE7 с помощью подходящего заголовка X-UA-Compatible header/meta; однако, да, установка background-image на прозрачный GIF фиксировала проблему для меня. Tsk, нам еще нужен пустой GIF даже в этот день и в возрасте, а?

Ответ 2

Пожалуйста, укажите html для элемента ввода.

Как вы определили элемент ввода? Код ниже работает в IE8 (IE 8.0.7600 Windows). Я пробовал это в IE8 и смог "правильно выбрать" область ввода.

<html>

<head>

<style>
.form-page input[type="text"] {
        border: none;
        background-color: transparent;
        /* Other stuff: font-weight, font-size */
}
</style>
</head>

<body>

<input type="text" name="test" value="test" id="test"/>

</body>
</html>

Ответ 3

Вы должны определить (прозрачное) фоновое изображение.

На всякий случай кто-то будет заинтересован. Один из предлагаемых обходных решений....

Ответ 4

Просто введите поле ввода прозрачное фоновое изображение, и оно будет работать...

Пример:

#search .input {
width:260px;
padding:3px 5px;
border:0;
background:url(../images/trans.gif);}

Ответ 5

Вот очень простой тестовый пример:

<html>
    <head>
    </head>
    <body style="direction: ltr;">
        <br/><br/><br/>
        <INPUT style="WIDTH: 100%;" />

        <DIV style="POSITION: absolute; TOP: 58px; RIGHT: 193px; WIDTH: 300px;">
            <INPUT style="WIDTH: 100%; background-color: transparent;"/>
        </DIV>
    </body>
</html>

При работе в IE8 вы должны увидеть фокус на базовом текстовом поле вместо абсолютно помещенного текстового поля.

Нашим решением было установить прозрачный цвет фона и прозрачное фоновое изображение:

<INPUT style="WIDTH: 100%; background-color: transparent; background-image: url('transparent.gif');"/>

Ответ 6

Я нашел ту же проблему, что и IE10 в Windows 7. Оба этих метода устранили проблему.

Метод Фрэнки с использованием прозрачного фонового изображения...

background:url(/images/transparent.gif);

Метод Sketchfemme с использованием цвета фона rgba с непрозрачностью '0'

background-color:rgba(0,0,0,0);

Предложение Джима Джеффера по редактированию z-index не работает для меня.

Ответ 7

IE в своей бесконечной мудрости решает не отображать элемент, потому что думает, что ничего не сделать. Есть много способов решить эту проблему, но в основном вам нужно дать IE что-то, чтобы пожевать.

Добавление значения 'value = x' к входному тегу определенно работает. Но, скорее всего, это не лучшее решение. Простой, цвет: черный (без фокуса) позволяет элементу накладываться. Добавление ': focus' к стилю ввода позволяет элементу визуализировать.

Попробуйте следующее:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head></head><body>

<style type="text/css">
  input[type="text"]:focus {
    border: none;
    background: transparent;
    /*background-color: blue;*/
  }
  #elem528 { position:absolute; left:155px; top:164px; width:60px; height:20px; }
  #elem529 { position:absolute; left:218px; top:164px; width:40px; height:20px; }
</style>

<img src="xxx.png" alt="" width="1000" height="1000">
<input id="elem528" maxlength="7" type="text">
<select id="elem529"></select>

</body></html>

Ответ 8

Как заметил бобин, это ошибка IE7. Иногда мне было удобно решить эту проблему, добавив value="       ". Используйте как можно больше неразрывных пробелов, чтобы сделать зону с клики достаточно большой. В зависимости от вашего приложения вам может понадобиться снять их позже.

Ответ 9

 background-image:url(about:blank);background-color:transparent;

Ответ 10

Если подобная проблема → текстовое поле IE8 не редактировалось (когда у оболочки моего приложения есть позиция: абсолютная). Щелчок работает только на границе. Заполненный цветом и прозрачным также не работал. При изменении следующего типа документа проблема устранена.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Источник: http://www.codingforums.com/showthread.php?p=1173375#post1173375

Ответ 11

Собственно, в моем случае это было как

text-indent: -9999px

Я использовал для удаления текста, не делаю этого, и он снова можно щелкнуть.

Ответ 12

Это может показаться странным, но вы должны попытаться явно указать z-индекс задействованных элементов. Это должно заставлять входные данные отображаться поверх элемента с нанесенным на него цветом фона/изображением.

Ответ 13

Кажется, что даже при использовании прозрачного gif-трюка, если вы установите фон: прозрачный в любом другом месте вашего CSS, для реальных веб-браузеров, он вызывает ошибку IE7, и вы не получаете курсора на зависании и не можете легко нажмите на поле ввода.

Ответ 14

Это удивительный вопрос. Я бы никогда не смог понять, что происходит без этой должности. Моим решением было использовать rgba(0,0,0,0) вместо прозрачного gif.