Webkit CSS Reset

Webkit CSS Reset?

While these styles are applied by Webkit, they are over-ruled by margin: 0; padding: 0; located in the CSS resets. You don't have to worry about them.

Note: Although Chrome (Version 27.0.1453.116 m) Developer Tools does not display the user agent styles with strikethrough, the computed styles do reflect that explicit margin and padding values override.

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.

Can't reset CSS Appearance Property

you need to set as menulist

select {

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

}

select.diff {

  -webkit-appearance: menulist;

  -moz-appearance: menulist;

  appearance: menulist;

}

<select>

  <option>Trains</option>

  <option>Planes</option>

  <option>Automobiles</option>

</select>

<select class="diff">

  <option>Oranges</option>

  <option>Pears</option>

  <option>Apple</option>

</select>

Restore Webkit's CSS outline on input field

Instead of resetting with outline: none, reset with outline-width: 0. This prevents the browser from clearing the styles and when you reapply a width the style will still be there.

input:focus {
  outline-width: 0;
}

input.nostyle:focus {
  outline-width: 5px;
}

http://jsfiddle.net/VT4Hb/

How to reset default styling of input[type= text ]:focus in Chrome and Safari?

You can get rid of the reset button feature of webkit using:

input[type="search"] {
    -webkit-appearance: none;
}

::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

This works in Chrome for sure, but I haven't had the chance to test in Safari.

When I reset the style of ::placeholder on a password input it turn into dots on Chrome & Safari browsers

try -webkit-text-security: initial; (https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security)

.reset-input::placeholder {
  all: unset;
  -webkit-text-security: initial;
}

<label>Reset Input</label>
<input class="reset-input" type="password" placeholder="placeholder text">

<br><br>

<label>UnReset Input</label>
<input type="password" placeholder="placeholder text">

CSS Reset for Chrome

Found a solution to my own question for once. I just tried normalize.css from http://necolas.github.com/normalize.css/ and it keeps the useful modern styles and fixes insentiences with other browsers (ie. IE). Looks about the same on both Chrome and IE when using "IE9 document standards".

---

Related Topics