CSS: ¿Qué hace "input[type="search"]::-webkit-search-decoration"?

Me pregunto cuál es la parte ::-webkit-search-decoration hacer en el selector de CSS para input[type="search"]::-webkit-search-decoration?

¿Y por qué esto está causando un error de excepción DOM?

function is(selector, element) {
        var div = document.createElement("div"),
        matchesSelector = div.webkitMatchesSelector;
        return typeof selector == "string" ? matchesSelector.call(element, selector) : selector === element;
 }
 is('input[type="search"]::-webkit-search-decoration', document.body);

preguntado el 24 de agosto de 12 a las 03:08

Puedo confirmar que la excepción DOM es causada por el "::-webkit-search-decoration" parte del selector. -

También se lanza una excepción DOM cuando intentas con "::-webkit-progress-value". Supongo que ciertos pseudoelementos específicos de webkit simplemente no se pueden usar con .webkitMatchesSelector(). -

Sí, es cierto, no se pueden usar.

2 Respuestas

Le permite hacer que los cuadros de búsqueda se vean uniformes en varios navegadores. Chrome, por ejemplo, tiene un estilo predeterminado para los cuadros de búsqueda que no encaja en algunos diseños.

aquí hay un buen enlace sobre el tema. http://geek.michaelgrace.org/2011/06/webkit-search-input-styling/

Respondido 24 ago 12, 03:08

¿La parte después ::tener un nombre? - Einstein

@Woho87 Selectores que comienzan con :: se llaman pseudo-elementos. P.ej ::first-letter. ::selection, ::before. - Sime Vidas

¿Está tratando de hacer coincidir un selector de búsqueda con un div? ¿Puedes explicar por qué estás haciendo eso? - David

@ Whoo87 Los selectores que comienzan con dos puntos son pseudoclases (p. ej. :hover). Los pseudoelementos comienzan con dos puntos. Esas son dos cosas diferentes. Las pseudoclases representan estados. Los pseudoelementos representan ciertas partes del documento que aún no están representadas por los elementos DOM existentes (por ejemplo, la primera letra de un párrafo). - Sime Vidas

@ Whoo87 Esa sección ha sido reemplazada por el estándar "Selectores CSS3". Lea acerca de los pseudo-elementos aquí: w3.org/TR/css3-selectors/#pseudo-elements - Sime Vidas

Simplemente hace que su cuadro de búsqueda tenga un poco de estilo. Como es una de las propiedades de css3, no funcionará en todos los navegadores.

Echa un vistazo en este enlace http://css-tricks.com/webkit-html5-search-inputs/

Respondido 24 ago 12, 03:08

¿Qué te hace pensar que es un selector CSS3? ¿Te fijaste? - Sime Vidas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.