Useful CSS tricks

Published on : April 6, 2015

Author: wahid

Category: HTML5

Today we are going to discuss about some useful css tricks.

1. How to change Text Highlight Color
With css we can control the color of selected test.

Source code:


::selection{ 
   /* Safari and Opera */
   background:#c3effd;
   color:#000;
}

::-moz-selection{ 
   /* Firefox */
   background:#c3effd;
   color:#000;
}

Output:

2. Prevent Firefox Scrollbar Jump
Firefox hides the vertical scrollbar when size of the content is less than visible window.
To fix this we can use simple CSS trick.

Source code:


html{ overflow-y:scroll; }

3.Cross Browser Minimum Height

Min-height property does not understand by internet explorer. That’s why here is a CSS trick to accomplish that in IE.

Source code:


#container{
   height:auto !important;/*all browsers except ie6 will respect the !important flag*/
   min-height:500px;
   height:500px;/*Should have the same value as the min height above*/
}

4.Cross Browser Opacity

Opacity is a css property. But this is not supports by all browser. That’s why there is a css trick for cross browsers.

Source code:


.transparent_class {
   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity: 0.5;
   opacity: 0.5;
}

5.Remove Vertical Textarea Scrollbar in IE

IE adds a vertical scrollbar to textarea input fields regardless of the height of content in it. We can fix that with this simple CSS trick.

Source code:


textarea{
   overflow:auto;
}

6.Remove Active Link Borders

Some browsers like Firefox and IE add a dotted outline border over the link user clicked. It is a useful accessibility feature that lets user know which link he clicked or is in focus. But sometimes you need to get rid of this, here’s the CSS you need to use.

Source Code:


a:active, a:focus{ outline:none; }

7. Attribute Specific Icons

CSS Attribute selectors are very powerful giving us many options to control styles of different elements e.g. we can add an icon based on the href attribute of the a tag to let the user know whether link points to an image, pdf, doc file etc.

Source Code:


a[href$='.doc'] {
   padding:0 20px 0 0;
   background:transparent url(‘image url’) no-repeat center right;
}