nascondi segnaposto con css

Question

Sto lavorando con un tema reattivo. E sto affrontando il problema del modulo di input qui. Nella vista desktop, l'input non avrà segnaposto ma etichetta.

Tuttavia, quando si tratta della visualizzazione mobile, nasconderò questa etichetta di input e cambierò questa etichetta con il segnaposto.

<input name="name" type="text" placehoder="insert your name"> 

La mia vera domanda è così semplice qui. Come nascondere questo segnaposto con css?

Grazie in anticipo!

Answer 1

È possibile utilizzare le media query e nascondere e spettacolo basato sulla risoluzione richiesta:

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
     ::-webkit-input-placeholder { 
     color: lightgray !important; 
     } 
     :-moz-placeholder { /* Firefox 18- */ 
     color: lightgray !important; 
     } 

     ::-moz-placeholder { /* Firefox 19+ */ 
     color: lightgray !important; 
     } 

     :-ms-input-placeholder { 
     color: lightgray !important; 
     } 
     #labelID 
     { 
     display:none !important; 
     } 
} 

stili normali

::-webkit-input-placeholder { 
     color: transparent; 
} 
:-moz-placeholder { /* Firefox 18- */ 
     color: transparent; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
     color: transparent; 
} 

:-ms-input-placeholder { 
     color: transparent; 
} 

#labelID{ 
     display:block; 
} 

Answer 2

In questo modo nascondere il segnaposto solo per i desktop (e grandi compresse):

@media (min-width:1025px) and (min-width:1281px) { 
 

 
    ::-webkit-input-placeholder { /* WebKit browsers */ 
 
     color: transparent; 
 
    } 
 
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
 
     color: transparent; 
 
    } 
 
    ::-moz-placeholder { /* Mozilla Firefox 19+ */ 
 
     color: transparent; 
 
    } 
 
    :-ms-input-placeholder { /* Internet Explorer 10+ */ 
 
     color: transparent; 
 
    } 
 

 
    textarea::-webkit-input-placeholder { /* WebKit browsers */ 
 
     color: transparent; 
 
    } 
 
    textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
 
     color: transparent; 
 
    } 
 
    textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ 
 
     color: transparent; 
 
    } 
 
    textarea:-ms-input-placeholder { /* Internet Explorer 10+ */ 
 
     color: transparent; 
 
    } 
 

 
}

This input has no placeholder on Desktops&nbsp;<input name="name" type="text" placeholder="insert your name">

Answer 3

<input name="name" type="text" id="id_here" placeholder="Your Label"> 

Effettuare la pelle segnaposto nella visualizzazione desktop

input::-moz-placeholder { 
    opacity: 0; 
} 

O

input::-moz-placeholder { 
    color:white; 
} 

1. Modificare i dati (o qualunque cosa textarea) per #id_here o il nome della classe, se non desidera modificare tutti gli input nel sito web

2. Usa per diversi browser

   -webkit-input-segnaposto -ms-input-segnaposto -moz-segnaposto

Answer 4

CSS fornisce solo lo stile, ma non è possibile rimuovere il segnaposto vero e proprio.

Cosa si può fare, impostare il colore del testo segnaposto come il colore del testo di sfondo, in modo che sarà simile non avete segnaposto ..

::-webkit-input-placeholder { /* WebKit browsers */ 
    color: #fff; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color: #fff; 
    opacity: 1; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color: #fff; 
    opacity: 1; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    color: #fff; 
} 

check the fiddle

Answer 5

fare sia l'ingresso campo e testo segnaposto dello stesso colore. Non c'è altro modo con i CSS.

@media all and (max-width:736px){ 
    ::-webkit-input-placeholder { 
    color:white; 
    } 

    :-moz-placeholder { /* Firefox 18- */ 
    color:white; 
    } 

    ::-moz-placeholder { /* Firefox 19+ */ 
    color:white; 
    } 

    :-ms-input-placeholder { 
    color:white; 
    } 
    } 

Answer 6

Si dovrebbe usare JS

$(window).resize(function(){ 
    if ($(window).width() >= 600){ 
     $(':input').removeAttr('placeholder'); 
    } 
});