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
How to Float an Element Left with Full Height of the Wrapper
All About Choosing the Right Font for a Website
Image Mysteriously Ignoring Max-Width in Firefox & Ie
Tweaking Bootstrap 2.0 for Semantic Markup
Vertical Scrollbar Leads to Horizontal Scrollbar
H1 Tag and P Tag on the Same Line
Positioning a "Wrapper" Div Underneath a Fixed Navigation Bar
Using Multiple-Class Selectors in IE7 and IE8
Bootstrap SASS Variable Override Challenge
Make Overlay Background Click-Through-Able
Change Color of Select Component's Border and Arrow Icon Material Ui
Css3 Box Shadow on Top, Left, and Right Only
Bootstrap 4, Bg-Inverse Not Showing