6

I wonder what the the part ::-webkit-search-decoration do in the CSS selector for input[type="search"]::-webkit-search-decoration?

And why is this causing en DOM Exception error?

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);
3
  • I can confirm that the DOM exception is caused by the "::-webkit-search-decoration" part of the selector. Aug 24, 2012 at 2:29
  • A DOM exception is also thrown when you try with "::-webkit-progress-value". I guess that certain webkit-specific pseudo-elements simply cannot be used with .webkitMatchesSelector(). Aug 24, 2012 at 2:39
  • Yes that's right they cannot be used
    – einstein
    Aug 24, 2012 at 2:58

2 Answers 2

7

It allows you to make search boxes look uniform across multiple browsers. Chrome for instance has default styling for search boxes that does not fit into some designs.

here is a good link on the topic. http://geek.michaelgrace.org/2011/06/webkit-search-input-styling/

6
  • Does the part after ::have a name?
    – einstein
    Aug 24, 2012 at 2:13
  • @Woho87 Selectors that start with :: are called pseudo-elements. E.g. ::first-letter. ::selection, ::before. Aug 24, 2012 at 2:15
  • you are trying to match a search selector to a div? Can you explain why you are doing that?
    – David
    Aug 24, 2012 at 2:17
  • 4
    @Woho87 Selectors that start with one colon are pseudo-classes (e.g. :hover). Pseudo-elements start with two colons. Those are two different things. Pseudo-classes represent states. Pseudo-elements represent certain parts of the document that are not already represented by existing DOM elements (e.g. the first letter of a paragraph). Aug 24, 2012 at 2:18
  • 1
    @Woho87 That section has been superseded by the "CSS3 Selectors" standard. Read about pseudo-elements here: w3.org/TR/css3-selectors/#pseudo-elements Aug 24, 2012 at 2:32
0

It just makes your search box little bit styled.As it is one of the property for css3 then it will not work on every browser.

Have a look in this link http://css-tricks.com/webkit-html5-search-inputs/

1
  • What makes you think that it's a CSS3 selector? Have you checked? Aug 24, 2012 at 2:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.