我的思路是这样的，input用一个div包裹起来，然后再在input前后各加一个div，背景设成圆角的图
附上jquery插件代码
(function($){ $.fn.jquery-button=function() { var defualt={}//为了方便就不传参数了 return this.each(function(){ var t=$(this);_t=this; function mouse_out(){ $(this).children(".button-over-left").removeClass("button-over-left").addClass("button-left"); $(this).children(".button-over-center").removeClass("button-over-center").addClass("button-center"); $(this).children(".button-over-right").removeClass("button-over-right").addClass("button-right"); } //鼠标的函数 function mouse_down(){ $(this).children(".button-over-left").removeClass("button-over-left").addClass("button-down-left"); $(this).children(".button-over-center").removeClass("button-over-center").addClass("button-down-center"); $(this).children(".button-over-right").removeClass("button-over-right").addClass("button-down-right"); t[0].click();//左圆角div和右圆角div点击时都出发input点击 }//鼠标按下的函数 function mouse_over(){ $(this).children(".button-left").removeClass("button-left").addClass("button-over-left"); $(this).children(".button-center").removeClass("button-center").addClass("button-over-center"); $(this).children(".button-right").removeClass("button-right").addClass("button-over-right"); }//鼠标经过的函数 function addclass(){ t.wrap($('<div></div>'));//用div包裹t t.addClass("button-center");//给t添加样式 t.before("<div class='button-left'></div");//t之前加左圆角 t.attr("onFocus","this.blur()");//点击时出去边框 t.after("<div class='button-right'></div>");//t之后加右圆角 } // function init(){ addclass(); t.parent().bind("mouseover",mouse_over).bind("mousedown",mouse_down).bind("mouseout",mouse_out); } //初始化 init(); }) ; } })(jQuery); $(function(){ $(.juqerybutton).jquery-button(); });
css样式：
.button-left{background:url(button_up_01.png) no-repeat;height:24px; width:13px; float:left;cursor:pointer} .button-center{background:url(button_up_02.png) repeat-x;height:24px;border-style: none; border:none; float:left;cursor:pointer} .button-right{background:url(button_up_03.png) no-repeat; height:24px;width:13px; float:left;cursor:pointer} .button-over-left{background:url(button_over_01.png) no-repeat;height:24px; width:13px; float:left;cursor:pointer} .button-over-center{background:url(button_over_02.png) repeat-x;height:24px;border-style: none; border:none; float:left;cursor:pointer} .button-over-right{background:url(button_over_03.png) no-repeat; height:24px;width:13px; float:left;cursor:pointer} .button-down-left{background:url(button_down_01.png) no-repeat;height:24px; width:13px; float:left;cursor:pointer} .button-down-center{background:url(button_down_02.png) repeat-x;height:24px;border-style: none; border:none; float:left;cursor:pointer} .button-down-right{background:url(button_down_03.png) no-repeat; height:24px;width:13px; float:left;cursor:pointer}
html代码：
<!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> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript" src="button.js"></script> </head> <body> <!--<div style="background:url(button_up01.png) left top no-repeat;height:52px;25px; " >--> <!--<div> <div class="button-left"></div> <input onFocus="this.blur()" type="button" value="hahahhhhhh" onclick="haha()" class="button-center"/><div class="button-right" ></div> </div> <div> <div class="button-left"></div> <input onFocus="this.blur()" type="button" value="hahahhhhhh" onclick="haha()" class="button-center"/><div class="button-right" ></div> </div>--> <input class="jquerybutton" value="hhhhhhhhh" type="button"/> <input class="jquerybutton" value="hhhhhhhhhhhhhhhhhhhhhhhhhhhh" type="button"/> </body> </html>
button_down_01.png button_down_02.png
button_down_03.png
button_over_01.png
button_over_02.png
button_over_03.png
button_up_01.png
button_up_02.png
button_up_03.png