分類  >  Web前端 >

input[submit]設立border時的雙重border現象

tags:    時間:2013-12-11 12:05:15
input[submit]設置border時的雙重border現象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style type="text/css"> 	.first { 		border:solid 1px #F00; 		/*border:none;  //將第一個border設置為none后,看其效果*/ 		/***紅色邊框外側存在黑色的邊框,形成雙邊框現象***/ 	} 	.second { 		border:solid 1px #F00; 		/***紅色邊框外側存在黑色的邊框,形成雙邊框現象***/ 	} 	 </style> </head>  <body> <input type="submit" value="aaa" class="first" /> <input type="submit" value="aaa" class="second" /> </body> </html> 


發現:

1、當僅僅存在一個submit的情況下,那麼,submit的border必定是雙重邊框的效果;

2、當存在多於一個submit的情況下,那麼,第一個submit的邊框默認為雙層,當點擊其他submit時,雙邊框將轉移到被點擊的submit上;

3、當存在多於一個submit的情況下,那麼,當所有submit都失去焦點的時候,第一個submit將默認為雙邊框;

4、當存在多於一個submit的情況下,那麼,當第一個submit的border設置為none之後,其他submit在獲取到焦點之後仍舊存在雙邊框現象,丟失焦點后,將不會再有雙邊框的現象,因為第一個submit的邊框已經設置為none了;


解決方法:

1、第一個submit使用背景圖,並將border設置為none,其他的submit就視情況而定;


我只想到這麼一個方法,希望各位大俠分享一下經驗……

推薦閱讀文章

Bookmark the permalink ,來源:互聯網