Ie6/7 the button, the input default border, and the focus line are removed in several ways

button, input default border and focus line really affect the beautiful, below for everyone to explain under IE6/7 below how to remove the border, focus line, the specific implementation of the following, interested friends can refer to the following

 

first, remove the border:

Look at the basic HTML:

Copy Code code as follows:


<div class= "wrap" >


<input type= "text" class= "Input_txt" >


<input type= "Submit" value= "Submit" class= "INPUT_BTN" >


<input type= "button" value= "Submit" class= "INPUT_BTN" >


<div>

Usually the best way to solve a bug like this is to add a label outside the label of the button and input, and then write the style on the label and remove the default style for the button and input.

implementation of the way: Set CSS:

Copy Code code as follows:


<style type= "Text/css" >


input{margin:0;padding:0;}


. Wrap{background-color: #0f0;}


. input_txt,.input_btn{border:0 none;


</style>

How to implement two: set up CSS and use filters:

Copy CodeThe code is as follows:


<!--[if ie]>


<style type= "Text/css" >


Input{margin:0;padding:0;filter:chroma (color= #000000); border:none;}


. Wrap{background-color: #0f0;}


</style>


<! [endif]-->

There seems to be some problem with this way! To be validated in a real IE7 environment.

second, remove the focus line:

Copy Code code as follows:


<style type= "Text/css" >


A:focus, *:focus {nofocusline:expression (This.onfocus=this.blur ());}


</style>