How to Revert Webkit-Appearance for Input[Type="Search"] of Normalize.CSS

how can I revert webkit-appearance for input[type=search] of normalize.css

Where I can find the specs for the default user agent styles values?

You can find a fairly recent copy of WebKit's UA stylesheet here.

And here are the relevant rules for the ::-webkit-search-decoration pseudo-element:

input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: searchfield-decoration;
    display: block;
   -webkit-flex: none;
   -webkit-align-self: flex-start;
    margin: auto 0;
}

How do I remove all default Webkit search field styling?

Try these stylings:

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;
}

Source: http://css-tricks.com/webkit-html5-search-inputs/#comment-82432

Override the -webkit-search-cancel-button

DEMO

1) Mozilla treats search inputs as text. For Webkit browsers however (Chrome, Safari), the search input is styled as a client created HTML

2) for chrome

CSS

Article link

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) */

}

Similar Question

How to reset number input back to default behaviour in Chrome

The value you're looking for is inner-spin-button, see snippet.

input[type='number'] {    -moz-appearance: textfield;}
input[type='number']::-webkit-outer-spin-button,input[type='number']::-webkit-inner-spin-button {    -webkit-appearance: none;}
.reset [type="number"] {    -moz-appearance: spinner-textfield;}
.reset input[type='number']::-webkit-outer-spin-button,.reset input[type='number']::-webkit-inner-spin-button {    -webkit-appearance: inner-spin-button;}

<input type="number" />
<div class="reset">    <input type="number" /></div>

webkit htm5 css reset for input elements

A good form reset stylesheet (with a wee bit of JS) is Formalize.

Formalize resets everything and than works to ensure consistent forms across browsers.

How to Remove Arrow on Input type Number with Tailwind CSS

So i found the solution for this -> On your global.css you have to add

@layer base {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

Webkit CSS to control the box around the color in an input[type=color]?

WebKit has special CSS selectors you can use to customize form controls but they aren't official.

An update to WebKit in the future will probably break it.

Please don't use it for production!!

But feel free to play with it for personal projects :)

Method 1

Uses webkit-specific selectors to mostly hide the non-colored part of the input.

input[type="color"] { -webkit-appearance: none; border: none; width: 32px; height: 32px;}input[type="color"]::-webkit-color-swatch-wrapper { padding: 0;}input[type="color"]::-webkit-color-swatch { border: none;}

<input type=color value="#ff0000">