web-dev-qa-db-fra.com

Les zones de saisie avec un fond transparent ne sont pas cliquables dans IE8

J'ai une zone de saisie absolument positionnée dans un formulaire. La zone de saisie a un fond transparent:

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

Étonnamment, je ne peux pas sélectionner cette zone de saisie en cliquant dessus dans IE8. Cependant, cela fonctionne parfaitement dans Firefox. La même chose se produit pour background: none. Lorsque je change la couleur d'arrière-plan:

    couleur de fond: rouge;

Cela fonctionne bien, c'est donc un problème associé à un fond transparent. La définition d'une bordure rend la zone de saisie sélectionnable en cliquant uniquement sur sa bordure.

Existe-t-il une solution de contournement pour que la zone de saisie cliquable avec un fond transparent fonctionne dans IE8?

Mise à jour: Exemple. Décommenter background-color et la zone de saisie est sélectionnable. Vous pouvez également cliquer sur la zone de sélection et concentrer la zone de saisie en appuyant sur Maj + 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>
htmlcssinternet-explorer-8internet-explorerinputbox
50
Viliam

Je ne parviens pas à reproduire un tel problème dans IE8. Cas de test complet? Êtes-vous sûr qu'il n'y a pas de problème de superposition provoquant un autre élément transparent pour couvrir la zone cliquable?

La configuration background-image faites une différence? Et un GIF transparent?

ETA: Curieux! Il s'agit en fait d'un bogue IE7. Pour moi, votre exemple présente le comportement décrit dans IE7, mais dans IE8, ce n'est qu'en mode EmulateIE7; dans le rendu natif IE8, il est fixe. Vous voudrez généralement vous assurer de ne pas revenir au rendu IE7 en utilisant un X-UA-Compatible en-tête/méta; cependant, oui, en définissant le background-image à un GIF transparent a résolu le problème pour moi. Tsk, nous avons toujours besoin du GIF vierge même de nos jours, hein?

27
bobince

Vous devez définir une image d'arrière-plan (transparente).

Juste au cas où quelqu'un serait intéressé. L'une des solutions de contournement suggérées ....

8
Viliam

Veuillez inclure le html de l'élément d'entrée.

Comment avez-vous défini l'élément d'entrée? Le code ci-dessous fonctionne dans IE8 (IE 8.0.7600 Windows). J'ai essayé cela dans IE8 et j'ai pu "sélectionner" très bien la zone d'entrée.

<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>
7
user250120

Donnez simplement au champ de saisie une image d'arrière-plan transparente et cela fonctionnera ...

Exemple:

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

Voici un cas de test très simple:

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

Lors de l'exécution dans IE8 - vous devriez voir le focus sur la zone de texte sous-jacente à la place sur la zone de texte absolument positionnée.

Notre solution était de définir à la fois la couleur d'arrière-plan transparente et l'image d'arrière-plan transparente:

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

J'ai trouvé le même problème en utilisant IE10 sur Windows 7. Les deux méthodes suivantes ont résolu le problème pour moi.


Méthode de Franky utilisant une image d'arrière-plan transparente ...

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


Méthode de Sketchfemme utilisant une couleur d'arrière-plan rgba avec l'opacité '0'

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


La suggestion de Jim Jeffers pour éditer les z-index n'a pas fonctionné pour moi.

2
Benjamin Walsh

Comme Bobince l'a observé, c'est un bug IE7. J'ai parfois trouvé pratique de le résoudre en ajoutant un value=" &nbsp; &nbsp; &nbsp; ". Utilisez autant d'espaces insécables que nécessaire pour agrandir la zone cliquable. Selon votre application, vous devrez peut-être les supprimer ultérieurement.

1
miles

IE dans sa sagesse infinie décide de ne pas restituer l'élément car il pense qu'il n'y a rien à rendre. Il existe de nombreuses façons de résoudre ce problème, mais en gros, vous devrez donner IE quelque chose à mâcher.

L'ajout d'une "valeur = x" à la balise d'entrée elle-même fonctionne définitivement. Mais ce n'est probablement pas la meilleure solution. Une couleur simple: le noir (sans le focus) permet de tabuler l'élément. L'ajout de ': focus' au style d'entrée permet de rendre l'élément.

Essaye ça:

<!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>
1
user250120
 background-image:url(about:blank);background-color:transparent;
1
reyhappen

Eu le même problème -> la zone de texte IE8 n'était pas modifiable (lorsque le wrapper de mon application a la position: absolue). Le clic n'a fonctionné que dans la bordure. Rempli de couleur et transparent ne fonctionnait pas non plus. Avec le changement de doctype suivant, le problème est résolu.

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

Source: http://www.codingforums.com/showthread.php?p=1173375#post1173375

0
Muthukumar Arumugam

En fait, dans mon cas, c'était comme

text-indent: -9999px

J'ai utilisé pour supprimer le texte, ne le faites pas et il est à nouveau cliquable.

0
e-anima