| CSS Technique: Style Textboxes And Textareas (learnwebcoding.com) |
- Styles textboxes and textareas identically cross-browser.
|
input[type="text"], textarea, :-ms-input-placeholder, :-moz-placeholder, ::-moz-placeholder, ::-webkit-input-placeholder selectors. border-radius, opacity properties.
|
- IE8+, ED12+, FF1.5+, SF3.1+, CH2+, OP9+. Support everything except possibly the older web browsers not supporting; 1.) the CSS
border-radius property, 2.) the HTML placeholder attribute, and 3.) the CSS *placeholder selectors.
|
| CSS Technique: Style Selectboxes (learnwebcoding.com) |
- Styles selectboxes nearly identically cross-browser.
|
- Technique 1:
select selector. overflow: hidden, background: url("dn_pnt_tri_8x4.gif") no-repeat 95%, width: 125% styles. border-radius property.
- Technique 2:
select, ::-ms-expand selectors. display: none, -moz-appearance: none, -webkit-appearance: none, appearance: none, background: url("dn_pnt_tri_8x4.gif") no-repeat 95%, padding: 4px 25px 4px 6px styles. border-radius property.
- Technique 3:
select selector. border-radius property.
|
- Technique 1: IE8+, ED12+, FF3+, SF4+, CH28+, OP15+.
- Technique 2: IE10+, ED12+, FF35+, SF3.1+, CH2+, OP15+.
- Technique 3: IE8+, ED12+, FF1.5+, SF4+, CH2+, OP10+.
- Techniques 1, 2, and 3: Support everything except possibly the older web browsers not supporting the CSS
border-radius property.
|
| CSS Technique: Style Checkboxes And Radio Buttons (learnwebcoding.com) |
- Styles checkboxes and radio buttons identically cross-browser.
|
- Technique 1:
background-color: #000 style.
- Technique 2:
color: transparent, color: inherit styles.
- Techniques 1 and 2:
input[type="checkbox"], input[type="radio"], label input[type="checkbox"] ~ span, label input[type="radio"] ~ span, label input[type="checkbox"]:checked ~ span, label input[type="radio"]:checked ~ span selectors.
|
- Techniques 1 and 2: IE9+, ED12+, FF4+, SF5+, CH13+, OP11.60+.
|
| CSS Technique: Reveal Fixed Web Page Footer Upon Scrolling (learnwebcoding.com) |
- Fixes footer to bottom of viewport.
- Positions main in front of footer.
- Reveals footer upon scrolling down web page.
|
- Technique 1:
header, main, footer type selectors.
- Technique 2:
div element class selectors.
- Techniques 1 and 2:
position: relative, z-index: 1, position: fixed, bottom: 0, left: 0, right: 0 styles.
|
- Technique 1: IE9+, ED12+, FF3+, SF3.1+, CH2+, OP9+.
- Technique 2: IE7+, ED12+, FF3+, SF3.1+, CH2+, OP9+.
|