input 提交表单按钮 背景图片的完美设置

Html代码

< input type ="submit" id ="submit_btn" src ="submit_btn_bg_img.jpg" value ="loginer" />

 

 

  这样的话，value值会附在背景图片的上方。 ok， 咱们能够用下面的方法来替换上面的方法

< input type ="submit" id ="submit_btn" name ="submit_btn"     value ="loginer" />

#submit_btn{
                 width:33px;
                 height:16px;
                 background:url(goto/p_w_picpath/path.jpg) no-repeat center;
                 cursor:pointer;
/* 上面的代码是常规设置， 即：引入一个图片背景，设置在中心位置，大小和按钮的大小一致，以及鼠标指针为手型 */

                    display:block;
                    font-size:0;
                    line-height:0;
                    text-indent:-9999px;
/* 上面的不用多问，四句一块儿拷贝就能够了，大概意思就是把value值设置为0像素，也就是肉眼没法看到，但却又是存在的（用$_POST['submit_btn'] 能够证实）*/
}

 

这样是否是很不错了，可是，还有一种状况，就是点击以后会出现虚线框，这个看我的习惯，我我的不喜欢有虚线框，那么我就在css文件中再加一段以下代码：

 

Css代码

a,area {     
  blr: expression(this.onFocus=this.blur());
}

:focus {     
  outline: none;    
}

 

固然，你也能够不用上面的通杀，只采用经典的局部必杀技 onfocus="this.blur()"

 

< input type ="submit" id ="submit_btn" name ="submit_btn" onfocus ="this.blur()"     value ="loginer" />