Last Updated: August 05, 2021
·
3.679K
· emi420

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