-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";

or all other filter

filter: -;
/* or */
filter: none;

CSS3 for make text anti-aliasing such as “crisp, sharp” same as photoshop.

body, table, form {
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; 
background-color: transparent; 
color: #333; 
-webkit-font-smoothing: antialiased;}

div {
    width: 70px;
    -webkit-transition: .5s all;   
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all;   
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all;   
    -ms-transition-delay: 5s; 
    -o-transition: .5s all;   
    -o-transition-delay: 5s; 
    transition: .5s all;   
    transition-delay: 5s; 
}

div:hover {
    width:130px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    -transition-delay: 0s;
}

Configuration Parameters

The shortcodes also accept a variety of configuration parameters that you may use to customize the output. All are completely optional.

• autolinks (true/false) — Makes all URLs in your posted code clickable. Defaults to true.
• collapse (true/false) — If true, the code box will be collapsed when the page loads, requiring the visitor to click to expand it. Good for large code posts. Defaults to false.
• firstline (number) — Use this to change what number the line numbering starts at. It defaults to 1.
• gutter (true/false) — If false, the line numbering on the left side will be hidden. Defaults to true.
• highlight (comma-seperated list of numbers) — You can list the line numbers you want to be highlighted. For example “4,7,19″.
• htmlscript (true/false) — If true, any HTML/XML in your code will be highlighted. This is useful when you are mixing code into HTML, such as PHP inside of HTML. Defaults to false and will only work with certain code languages.
• light (true/false) — If true, the gutter (line numbering) and toolbar (see below) will be hidden. This is helpful when posting only one or two lines of code. Defaults to false.
• padlinenumbers (true/false/integer) — Allows you to control the line number padding. true will result in automatic padding, false will result in no padding, and entering a number will force a specific amount of padding.
• toolbar (true/false) — If false, the toolbar containing the helpful buttons that appears when you hover over the code will not be shown. Defaults to true.
• wraplines (true/false) — If false, line wrapping will be disabled. This will cause a horizontal scrollbar to appear for long lines of code.

Example

[css toolbar=”true” ruler=”true” title=”true” tab-size=”4″]
/* Mixin */
@base: #663333;
@lighter1: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker1: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);

/* Implementation */
.one {color: @base;}
.two {color: @lighter1;}
.three {color: @lighter2;}
.four {color: @darker1;}
.five {color: @darker2;}
[/css]

Result

/* Mixin */
@base: #663333;
@lighter1: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker1: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);

/* Implementation */
.one {color: @base;}
.two {color: @lighter1;}
.three {color: @lighter2;}
.four {color: @darker1;}
.five {color: @darker2;}

Language Support

The code how to.

<div id="categoryList">
    <a class="category">Down <span class="arr1"></span></a>
    <a class="category">Up <span class="arr2"></span></a>
    <a class="category">Left <span class="arr3"></span></a>
    <a class="category">Right <span class="arr4"></span></a>
</div>

and this is the css

#categoryList a {
    text-indent: 20px;
    display: block;
    position: relative;
}
#categoryList .arr1 {
    display: inline-block;
    width: 0;
    height: 0;
    text-indent: -99999px;
    vertical-align: top;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #000000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    content: "\2193";
    float: left;
    position: relative;
    top: 7px;
}
#categoryList .arr2 {
    display: inline-block;
    width: 0;
    height: 0;
    text-indent: -99999px;
    vertical-align: top;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #000000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    content: "\2193";
    float: left;
    position: relative;
    top: 7px;
}
#categoryList .arr3 {
    display: inline-block;
    width: 0;
    height: 0;
    text-indent: -99999px;
    vertical-align: top;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 4px solid #000000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    content: "\2193";
    float: left;
    position: relative;
    top: 7px;
}
#categoryList .arr4 {
    display: inline-block;
    width: 0;
    height: 0;
    text-indent: -99999px;
    vertical-align: top;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #000000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    content: "\2193";
    float: left;
    position: relative;
    top: 7px;
}

In css if you make a div/input width 100% and apply the padding 30px to its.
So the width will become 100%+30px not absolute 100% as you want.
This solution by fix by add the css border-box

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

or easy way by

          width: 90%;
          padding: 5%; /* including padding-left: 5% and padding-right 5% */