Q

Le caselle di input con sfondo trasparente non sono selezionabili in IE8

2010-01-20 11 views 50 likes

50

Ho una casella di input posizionata in modo assoluto in un modulo. La casella di input ha sfondo trasparente:Le caselle di input con sfondo trasparente non sono selezionabili in IE8

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

Sorprendentemente, non riesco a selezionare questa casella di input facendo clic su di esso in IE8. Funziona perfettamente in Firefox tuttavia. Lo stesso accade per background: none. Quando cambio il colore dello sfondo:

 background-color: red;

Funziona bene, quindi questo è un problema associato allo sfondo trasparente. L'impostazione di un bordo rende selezionabile la casella di input facendo clic solo sul suo bordo.

C'è una soluzione alternativa per disporre di una casella di input selezionabile con sfondo trasparente che funziona in IE8?

Aggiornamento: Esempio. Decodificare background-color e la casella di input è selezionabile. Puoi anche fare clic sulla casella di selezione e mettere a fuoco la casella di immissione premendo Maiusc + 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>

2010-01-20 Viliam

+0

comportamento confermato in IE 9.0.8112 ... Wow IE. – Bobby

A

risposta

27

Non riesco a riprodurre questo problema in IE8. Caso di prova completo? Sei sicuro che non ci sia un problema di stratificazione che causi un altro elemento trasparente per coprire l'area cliccabile?

L'impostazione background-image fa la differenza? Che ne dici di una GIF trasparente?

ETA: Curioso! In realtà è un baco IE7. Per me, il tuo esempio mostra il comportamento descritto in IE7, ma in IE8 è solo in modalità EmulateIE7; nel rendering nativo IE8 è corretto. In genere vorrai assicurarti di non ricorrere al rendering IE7 utilizzando un'appropriata intestazione/meta X-UA-Compatible; tuttavia, sì, l'impostazione di background-image in una GIF trasparente ha risolto il problema per me. Però, abbiamo ancora bisogno della GIF vuota anche in questo giorno ed età, eh?

2010-01-20 02:55:57 bobince

+0

Sì, sono sicuro perché l'attivazione del colore non cambierebbe i livelli. Lavorando sull'esempio. – Viliam

+0

Esempio incluso. – Viliam

+0

@Villiam [aggiornato]. – bobince

7

Si prega di includere l'html per l'elemento di input.

Come è stato definito l'elemento di input? Il codice qui sotto funziona in IE8 (IE 8.0.7600 Windows). Ho provato questo in IE8 ed è stato in grado di 'selezionare' l'area di input bene.

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

2010-01-20 02:57:13 user250120

+0

Esempio incluso. – Viliam

-1

Può sembrare strano ma si dovrebbe provare specificando esplicitamente l'indice z degli elementi coinvolti. Ciò dovrebbe forzare l'input per il rendering sopra l'elemento con il colore/l'immagine di sfondo ad esso applicati.

2010-01-20 04:24:46

+0

Provato già, ma senza successo. – Viliam

+0

Sei in grado di fornire un link pubblico alla pagina? –

1

IE nella sua infinita saggezza sta decidendo di non rendere l'oggetto perché pensa che non ci sia nulla da rendere. Ci sono molti modi per risolvere questo problema, ma in pratica devi dare a IE qualcosa da masticare.

L'aggiunta di un 'valore = x' al tag di input funziona sicuramente. Ma più che probabile non è la soluzione migliore. Un semplice colore: nero (senza messa a fuoco) consente di inserire l'elemento in. L'aggiunta di ": focus" allo stile di input consente all'elemento di essere visualizzato.

Prova questo:

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

2010-01-20 04:38:40 user250120

+0

In realtà l'oggetto è reso, poiché è possibile selezionarlo premendo Tab. Ma i clic su di esso vengono ignorati. Proverò il valore = 'x', ma aggiungerà un testo ad esso, qualcosa che non voglio in generale. – Viliam

+1

@Viliam, In realtà, penso che i clic siano passati a qualsiasi cosa ci sia dietro. Oggi mi sono imbattuto in questo bug su un elemento pulsante (il client è finalmente aggiornato da IE6 a IE8) e l'area selezionabile era larga 1px. background: url (../ images/clear.gif) nel CSS fisso (work-around) it. – hood

8

È necessario definire un'immagine di sfondo (trasparente).

Nel caso in cui qualcuno sarebbe interessato.Una delle soluzioni suggerite ....

2010-01-20 21:35:56 Viliam

2

Ecco un semplice caso di test:

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

Durante l'esecuzione in IE8 - si dovrebbe vedere il focus sulla casella di testo sottostante invece sulla casella di testo posizionato in modo assoluto.

La nostra soluzione era quella di impostare sia il colore di sfondo trasparente e l'immagine di sfondo trasparente:

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

2010-04-29 05:14:51 user328508

-1

Sembra però che anche con il trucco gif trasparente, se si imposta sfondo: trasparente in qualsiasi altro luogo nel CSS, per gli effettivi browser Web, attiva il bug IE7 e non si ottiene un cursore su hover e non si può facilmente fare clic nella casella di input.

2010-06-24 23:30:32 Crankypants

6

solo dare il campo di input un'immagine di sfondo trasparente e che funzionerà ...

Esempio:

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

2010-12-01 08:33:36 Franky

+0

ha funzionato perfettamente per me. – brenjt

1

Come bobince osservato, si tratta di un bug di IE7. A volte ho trovato conveniente risolverlo aggiungendo un value="       ". Usa tutti gli spazi non interrotti necessari per rendere l'area cliccabile abbastanza grande. A seconda della tua app, potresti doverli rimuovere in seguito.

2011-03-12 19:38:14 miles

0

Se il problema simile -> IE8 casella di testo non fosse modificabile (quando wrapper della mia applicazione ha posizione: assoluta). Fare clic ha funzionato solo sul bordo. Pieno di colore e trasparente anche non ha funzionato. Con il seguente doctype, il problema è stato risolto.

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

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

2011-12-23 16:26:27

0

In realtà nel mio caso era come

text-indent: -9999px

ho usato per rimuovere il testo, non fare così ed è cliccabile di nuovo.

2012-02-14 10:27:11

-1

questa è una domanda fantastica. Non sarei mai stato in grado di capire cosa stava succedendo senza questo post. La mia soluzione però era usare rgba(0,0,0,0) invece di gif trasparenti.

2013-04-10 18:14:29 Homan

1

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

2014-02-17 03:43:30 reyhappen

+1

per favore spiega anche la tua risposta. Thx –

+0

E 'solo bisogno di un'immagine di sfondo – reyhappen

2

Ho riscontrato lo stesso problema utilizzando IE10 su Windows 7. Entrambi i seguenti metodi hanno risolto il problema per me.

il metodo di Franky utilizzando un'immagine di sfondo trasparente ...

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

il metodo di Sketchfemme utilizzando un colore di sfondo RGBA con l'opacità '0'

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

Jim Jeffers suggerimento per la modifica del z -index non ha funzionato per me.

2014-02-25 12:11:31