7 Quick CSS Enhancements for Better User Experience
http://davidwalsh.name/css-enhancements-user-experience
Change Text Highlight Color
::selection { background:#c3effd; color:#000; /* Safari and Opera */ }
::-moz-selection { background:#c3effd; color:#000; /* Firefox */ }
The default text selection color is usually a boring navy color (at least on Windows PCs). Firefox, Opera, and Safari allow you to change the color to whatever you'd like!
Prevent Firefox Scrollbar Jump
html { over-flow-y: scroll;}
Firefox has an unfortunate habit of showing the right scrollbar when a page is long and hiding it when the page doesn't reach below the fold, thus creating an undesireable "jump" The above snippet prevents that.
Rounded-Corner Elements
input { -moz-border-radius:10px; -webkit-border-radius: 10px;}
Adding a subtle rounded corner to input elements (like WordPress does) can add a classy touch to otherwise boring elements.
Print Page Breaks
.page-break { page-break-before: always;}
Don't forget that many users print off your information pages! The above CSS snippet allows you to set page breaks within each page.
Attribute-Specific Icons
a[href$='.pdf'] { padding: 0 20px 0 0; background: transparent url(/graphics/icons/pdf.gif) no-repeat center right;}
Spice up your links by adding attribute-specific icons to your links. Add PDF icons next to your .PDF links, Excel icons next to your .XLS links, and so on. This is a great way to warn the user that you are linking to a document other than another page.
CSS Pointer Cursors
input[type=submit],label,select,.pointer {cursor:pointer;}
New rule for you to live by: if the user is meant to click on any element, it should have the "pointer" coursor when the user mouses over it. Links, buttons, SELECT elements, etc.
Display:block Links
#navigation li a {display:block;}
When you've built a navigation menu whith UL/LI/A elements, be sure to set each anchor's display property to "block" so that the user doesn't necessarily need to hover the anchor's text for the link to work.
好文，收藏。