Supponendo che sia possibile solo con i CSS ... ma volevo sapere se qualcuno potrebbe condividere il codice.come hai inserito la lente di ingrandimento e "cerca" nella casella di ricerca in StackOverflow?
La lente d'ingrandimento indovinata è un'immagine di sfondo, ma è necessario il javascript per rimuovere la "ricerca" a fuoco.
Inoltre ... come si può inviare quando si preme "ritorno" anziché richiedere un pulsante di invio "cerca"?
Visualizza -> Origine pagina.
Seriamente, è tutto lì.
alcune domande là:
presentare una proposta in cambio, se si mette un ingresso in una forma, e hanno messa a fuoco su detta di ingresso, quando si preme INVIO il browser di default inviare il modulo.
Mascheratura di testo. puoi farlo facilmente con jquery o qualsiasi altro framework. essenzialmente rimuoverai il testo "cerca" su focus, ma solo quel testo quindi se ci fosse qualcosa come "foo" non lo sostituirà.
per il vostro testo esigenze di mascheratura: text mask
Ci sono diversi elementi in gioco.
Utilizzare Chrome DevTools (F12) per ispezionare queste cose.
È possibile utilizzare i nuovi tipi input per quello.
<input type="search" placeholder="Search" results="0" />
L'attributo 'risultati' aggiungerà l'icona della lente di ingrandimento nei browser WebKit.
MDN dice (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input) che type = "search" è supportato solo da IE 10+ –
Questa funzione è stata ritirata in Chrome, a causa ad esso non sta prendendo piede in altri browser. Vedi: https://www.chromestatus.com/features/5738199536107520 –
Sembra che ora ci sia un buon supporto: https://caniuse.com/#feat=input-search – Hozefa
Risposta irrilevante, questo non è affatto utile –
@franko_camron perché questa risposta è considerata irrilevante, e allo stesso tempo [la risposta] (https://stackoverflow.com/a/711526/1429387) data 2 minuti più tardi , che in effetti suggerisce una soluzione simile, guadagna 20 punti e diventa il più upvoted? – naXa