Поля ввода с прозрачным фоном не активируются в IE8 - PullRequest
Новая
       39

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

50 голосов
/ 20 января 2010

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

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

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

background-color: red;

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

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

Обновление: Пример.Раскомментируйте 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>

Ответы [ 14 ]

0 голосов
/ 14 февраля 2012

На самом деле в моем случае это было похоже на 

text-indent: -9999px

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

0 голосов
/ 23 декабря 2011

Была похожая проблема -> текстовое поле 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

0 голосов
/ 25 июня 2010

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

0 голосов
/ 20 января 2010

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

Страница:
...