input 交付表单按钮 背景图片的完美设置 (隐藏字体)

input 提交表单按钮 背景图片的完美设置 (隐藏字体)

<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/image/path.jpg) no-repeat center;
         cursor:pointer;
/* 上面的代码是常规设置， 即：引入一个图片背景，设置在中心位置，大小和按钮的大小一致，以及鼠标指针为手型 */

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

 

这样是不是很不错了，但是，还有一种情况，就是点击之后会出现虚线框，这个看个人习惯，我个人不喜欢有虚线框，那么我就在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" />