CSS: normalize mobile browsers
This is a collection of useful code snippets mostly written by my teammate Natalia Petit (based on http://github.com/necolas/normalize.css). Nati is a CSS expert that commits on our HTML5 library, Mootor (https://github.com/emi420/Mootor).
Removes webkit border when the element is on focus
a, a:hover, a:focus,
input, input:focus,
select, select:focus,
textarea, textarea:focus {
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
Removes inner padding and search cancel button
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
Corrects block
display not defined in Android 2.1, iOS 3.2 and Opera Mini.
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
1.Improves usability and consistency of cursor style between image-type 'input' and others
2.Corrects inability to style clickable 'input' types in iOS
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer; // 1
-webkit-appearance: button; // 2
}
1.Avoid the WebKit bug in Android 4.0.* where (2) destroys native 'audio' and 'video' controls.
2.Corrects inability to style clickable 'input' types in iOS.
3.Improves usability and consistency of cursor style between image-type 'input' and others.
button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; // 2
cursor: pointer; // 3
}
Do you want more? check here:
https://github.com/emi420/Mootor/blob/master/source/css/sass/_normalize.scss