如果我们把input的type设置为submit,是的,提交表单经常需要submit按钮,就像下面这样:
<inputtype="submit"class="button"value="登录"/>
你会发现submit初始状态就是这种焦点获取的黑框样式:精心开发5年的UI前端框架!
怎么办?如果设置border:none,也就是说不要border,那么这种黑框就没 有了,所以有种解决办法是直接把框写死到背景上,然后去除border,即设置border:none。比如下面这个按钮样式的背景罗列。这种办法的缺点 想必大家都清楚,就是灵活性差了点,有多少size的按钮就要准备多少size的背景。
一直以来我也很天真的认为就这么一种办法了,直到我膝盖中了一箭,偶然一次查看 FaceBook的HTML代码发现了其高明之处,FB也使用了边框border,背景是背景的分离办法,但是其在IE7或者IE6下就是没有黑框,实现 方法很巧妙,就是利用了label的特性,具体思路就是input按钮去除框线(border:none),然后input外面套上 label,border写到label上,由于input被去除了border,所以不会出现黑框,同时外面的label有border,所以用户可以 看到正常的框线,当然由于label的特性,你点击label的时候也等于点击了input按钮,哦,对了,为了模拟得更好一点,你可以设置他们的 cursor为pointer,改良版的代码如下: 精心开发5年的UI前端框架!
<style type="text/css"> .button-fixed { background:#fff url("btnbg.png") repeat-x 0 center; height:25px; width:130px; border: none; margin:0; cursor: pointer; } .button-wrapper { display:block; padding:0; width:130px; border: #707070 1px solid; cursor: pointer; } </style> label模拟去黑框普通button按钮 <br /> <label class="button-wrapper"> <input type="button" class="button-fixed" value="登录" /> </label> <br /> label模拟去黑框submit按钮 <br /> <label class="button-wrapper"> <input type="submit" class="button-fixed" value="登录" /> </label>
相关推荐
编写,在Frame中加入2个按钮(Button)和1个标签(Label),单击两个按钮,显示按钮的标签于Label。
BYLABEL标签打印系统V3.68,BYLABEL标签打印系统V3.68BYLABEL标签打印系统V3.68
通过重新绘制label控件的边框及背景色,实现label控件原有的BorderStyle属性。
如果要让浏览按钮更漂亮一点,我们想定义它的背景颜色,甚至想用...偶然看到一篇文章:input file 文件选择框美化 作者是把系统默认的按钮设置透明度为0,再定义一个label标签样式,来覆盖透明掉的按钮。支持IE6\IE7\FF
Qt QPieSeries QPieSlice label 标签重叠解决方案 详细介绍请参见博客: https://blog.csdn.net/xiezhongyuan07/article/details/124432321
编写Application程序,在Frame中加入2个按钮(Button)和1个标签(Label),单击两个按钮,显示按钮的标签于Label。
在C#中将label标签的背景设为透明 在C#中将label标签的背景设为透明
一个简单的qt程序QPushButton测试,点击按钮按钮消失
在IE8及以下版本时,点击label标签无法自动触发checkbox的click事件,导致无法产生希望的效果。 原HTML代码: <label><input type=checkbox id=chk_sqjc value=申请检查 name=menu class=cbr cbr-blue>...
jquery实现动态禁用label标签效果,可以通过表单内的一个checkbox控制其他的checkbox是否可用,经测试非常有用,感兴趣的朋友可以参考下哈,希望对你有所帮助
可点击按钮横向缓缓展开控件,再次点击缓缓收回控件列表。可渐渐隐藏或显示label,有动画效果。label可换成任意控件。
WinCE自定义控件原代码 C# VS2008开发 有以下4个控件: MyButton 自定义绘制的按钮,圆角比之前的漂亮很多 MyImageButton 图片按钮。...MyLabel 支持背景图片的Label MyPictureControl 用来设置图片。可使bmp图片透明
YYLabelDemo-展开,收起按钮在label的有下边。
Python_tkinter_2_Label_&_Button_标签和按钮_(GUI_窗口_教学教程tutorial)
下面小编就为大家带来一篇label+input实现按钮开关切换效果的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
NULL 博文链接:https://onestopweb.iteye.com/blog/2273469
Qt中通过控件在Label标签中显示一张静态图片
label 元素不会向用户呈现任何特殊效果 label把事件转移到相关元素上面 for 属性规定 label 与那个元素绑定绑定事件
vb中label标签要显示当前时间要怎么样写代码 vb中label标签要显示当前时间要怎么样写代码
为了让标签更加语义化,在表单项中,我们往往会使用label进行包裹 <label for=label-input> ...如上图所示,只是希望点击input项才产生效果,但点击label标签内的其他空区域就触发了(注意到点击b