首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-11-22 
input 提交表单按钮 背景图片的完美设置 (隐藏字体)input typesubmit idsubmit_btn srcsubmit_bt

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" />
?

?

热点排行