2009-04-02 93 views
7

Suponiendo que es posible con solo CSS ... pero quería saber si alguien podría compartir el código.¿cómo pones la lupa y "buscar" en el cuadro de búsqueda en stackoverflow?

Guessing lupa es una imagen de fondo, pero necesita JavaScript para eliminar la "búsqueda" en el enfoque.

Además ... ¿cómo se puede enviar al presionar "regresar" en lugar de necesitar un botón de "búsqueda" para enviar?

Respuesta

0

Ver -> Fuente de la página.

En serio, está todo allí.

+9

respuesta irrelevante, esto no es en absoluto atento –

+1

@franko_camron por qué esta respuesta se considera irrelevante, y al mismo tiempo [la respuesta] (https://stackoverflow.com/a/711526/1429387) administrada 2 minutos más tarde , que de hecho sugiere una solución similar, gana 20 puntos y se convierte en el más votado? – naXa

4

allí algunas preguntas:

  1. Enviar en cambio, si se pone una entrada en un formulario, y tienen enfoque en dicha entrada, cuando se presiona entrar en el navegador por defecto enviar el formulario.

  2. Enmascaramiento de texto. puedes hacerlo fácilmente en jquery o en cualquier otro marco. esencialmente eliminarás el texto "buscar" en el foco, pero solo ese texto, así que si hubiera algo como "foo" no lo reemplazaría.

para sus necesidades de enmascaramiento de texto: text mask

20

Hay varios elementos que intervienen.

Use las DevTools de Chrome (F12) para inspeccionar estas cosas.

+0

La fuente de vista de IE 8 también es muy buena. – rism

+4

coinciden en Firebug – Benry

+0

Tenga en cuenta que hoy debe usar el elemento 'input [type =" search "]', con el atributo 'placeholder'. – alex

3

Puede utilizar los nuevos tipos input para eso.

<input type="search" placeholder="Search" results="0" /> 

El atributo 'resultados' agregará el icono de la lupa en los navegadores WebKit.

+0

MDN dice (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input) que type = "search" solo es compatible con IE 10+ –

+1

Esta característica está en desuso en Chrome, debido a a no captar en otros navegadores. Ver: https://www.chromestatus.com/features/5738199536107520 –

+0

Parece que ahora hay un soporte bastante bueno: https://caniuse.com/#feat=input-search – Hozefa

Cuestiones relacionadas