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