[css-d] Styling webkit search field pseudo-elements

[Nicholas Shanks]

Hi guys.
Does anyone know of a way to change the foreground colour of the ::-webkit-search-decoration, ::-webkit-search-cancel-button, ::-webkit-search-results-button, or ::-webkit-search-results-decoration pseudo-elements?

Specifically, I want to change the foreground colour to white when the element is not focused, and red when it is, so that it contrasts with the background colour and matches the text colour.

:active, :focus { -webkit-search-field-furniture-foreground-color: darkredish }


:valid:hover { -webkit-search-field-furniture-foreground-color: white }


Also, is there a way to make the focus outline ends semi-circular?
I tried -webkit-outline-radius and outline-radius in both Chrome 38 and Safari 7.1 without joy.
Do I need to implement it myself?

[Philippe Wittenbergh]

Post by Nicholas Shanks
Does anyone know of a way to change the foreground colour of the ::-webkit-search-decoration, ::-webkit-search-cancel-button, ::-webkit-search-results-button, or ::-webkit-search-results-decoration pseudo-elements?

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
}

Then implement everything yourself. E.g.
input[type="search"]::-webkit-search-cancel-button {

/* Remove default */
-webkit-appearance: none;

/* Now your own custom styles */
height: 10px;
width: 10px;
background: red;
/* Will place small red box on the right of input (positioning carries over) */

}

Post by Nicholas Shanks
:active, :focus { -webkit-search-field-furniture-foreground-color: darkredish }

Mystery property?

Post by Nicholas Shanks
Also, is there a way to make the focus outline ends semi-circular?
I tried -webkit-outline-radius and outline-radius in both Chrome 38 and Safari 7.1 without joy.

outline-radius is not specified anywhere; it might come in the future, eventually. Firefox has an experimental -moz-outline-radius property…
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-outline-radius


Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





______________________________________________________________________
css-discuss [css-***@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org --