2013-12-13 15 views
5

Sto cercando di rendere trasparente il mio modulo e di sovrapporlo al mio div. Fondamentalmente voglio che il campo di testo sia trasparente a qualunque cosa ci sia dietro. Eventuali suggerimenti?Rendi trasparente la casella di immissione del testo? Dovrebbe essere semplice?

<head> 

<style type="text/css"> 
    .WRAPPER { 
    background-color: #000; 
    height: 575px; 
    width: 975px; 
    background-image: url(exit-gate/exit-gate-bg.png); 
    top: auto; 
    margin: -8px; 
    } 

    body { 
    background-color: #000; 
    } 
</style> 

<style type="text/css"> 
    term { 
    background: transparent; 
    border: none; 
    } 
</style> 

</head> 



<body> 
    <div id="WRAPPER"> 
    <div class="term"><input name="email" type="text" id="email"> 
     <form name="form1" method="post" action="insert_ac.php"> 
     <input type="image" src="exit-gate/white-box-10.png" alt="{alternate text}" name="submit" value="submit"> 
     </form> 
    </div> 
    </div> 
</body> 
</html> 
</div> 
+0

la dichiarazione di "termine" css deve essere ".term" per avere qualche speranza di lavoro. Anche la tua struttura DOM è incasinata, sicuramente non dovresti avere un "div" dopo il tuo tag HTML di chiusura. – DrCord

+0

@DrCord - grazie per averlo indicato. Sono un novizio ... quindi le cose tendono a diventare disordinate quando vado, ma lo pulirò. Grazie – HoustonGuy

risposta

8

Prova:

#email { 
    background-color:rgba(0, 0, 0, 0); 
    color:white; 
    border: none; 
    outline:none; 
    height:30px; 
    transition:height 1s; 
    -webkit-transition:height 1s; 
} 
#email:focus { 
    height:50px; 
    font-size:16px; 
} 

DEMO here.

+2

Vorrei andare con 'transparent' su un valore' rgba'. Poiché i browser più vecchi imposteranno automaticamente il colore solido. In questo caso, nero. – Smeegs

+0

@Hiral, grazie che ha funzionato! Un'altra domanda ... Come suggeriresti di specificare il carattere, la dimensione e il colore del testo quando il visitatore digita e anche di specificare la dimensione della casella di testo? Grazie !!! – HoustonGuy

+0

@ user3089680 Ho modificato la risposta. [intendevi questo?] (http://jsfiddle.net/pWnhN/2/) – Hiral

1

questo sembra modi troppo semplice, ma ha funzionato per me:

<input type="text" id="SI"/> 

Questo è il mio campo di input, ho dato un ID (SI), quindi nel mio CSS:

#SI{ 
    background-color:transparent; 
} 

aggiunto la trasparenza all'elemento con ID SI; lo sfondo è diventato visibile.

Problemi correlati