2009-08-29 30 views
37

Come posso rendere questo input trasparente?Esiste un modo CSS puro per rendere trasparente un input?

<input type="text" class="foo"> 

Ho provato questo ma non funziona.

background:transparent url(../img/transpSmall.png) repeat scroll 0 0; 
+2

Impostare l'input in modo che sia dello stesso colore di quello dietro. –

+2

Sei sicuro di non voler solo tipo di input = "nascosto"? –

+3

Potrebbe essere un honeypot dello spam, che sarebbe legittimo, anche se avere qualcosa di visibile ma ancora focalizzabile non è una grande idea. – Kzqai

risposta

95
input[type="text"] 
{ 
    background: transparent; 
    border: none; 
} 

Nessuno lo sa nemmeno che c'è.

+3

Questo si rompe in IE7 – Metropolis

+12

@Metropolis è lieto di segnalare che a nessuno importa di questo al 2016 – Denis

+1

Come ha detto Denis, solo le persone in Cina si preoccupano della compatibilità IE7 al giorno d'oggi. –

19

mi piace fare questo

input[type="text"] 
{ 
    background: rgba(0, 0, 0, 0); 
    border: none; 
    outline: none; 
} 

L'impostazione della proprietà outline-none arresta il browser da evidenziando la casella quando il cursore entra

7

I due metodi descritti in precedenza non bastano oggi. Io personalmente uso:

input[type="text"]{ 
    background-color: transparent; 
    border: 0px; 
    outline: none; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    width:5px; 
    color:transparent; 
    cursor:default; 
} 

rimuove anche l'ombra impostata su alcuni browser, nascondere il testo che potrebbe essere di input e fare si comportano cursore come se l'ingresso non era lì.

Si consiglia di impostare anche la larghezza su 0px.

1

Ho impostato l'opacità su 0. Questo lo ha fatto scomparire ma funziona ancora quando si fa clic su di esso.

0

Come regola generale, non rimuovere mai completamente lo stile outline o :focus.

https://a11yproject.com/posts/never-remove-css-outlines

... usando outline: none senza fallback adeguati rende il vostro sito molto meno accessibile a qualsiasi tastiera unico utente, non solo quelli con la visione ridotta. Assicurati di dare sempre ai tuoi elementi interattivi un'indicazione visibile di messa a fuoco.

Problemi correlati