a，button，input点击出现button蓝色边框框，如何去掉

来源：蜘蛛抓取(WebSpider) 时间：2017-02-10 14:58 标签： input 蓝色边框
后使用快捷导航没有帐号？
只需一步，快速开始
查看: 7422|回复: 13
Input点击时，如何取消按钮凹陷的状态
UID539020在线时间 小时积分901帖子离线17447 天注册时间
高级会员, 积分 901, 距离下一级还需 99 积分
&INPUT TYPE=&button& VALUE=&& ONCLICK=&& style=&background:url();border:0;&&
&提示：您可以先修改部分代码再运行
根据版主的方法追加了STYLE，但是点击input，文字依然有晃动效果，如何才能使之静止呢？
如题，点击按钮时，按钮凹陷导致背景图错位，如何使点击时不凹陷?或背景图不移动？通过CSS为上~先谢谢了
[[i] 本帖最后由 cwq2jxl 于
09:24 编辑 ]
UID332682在线时间 小时积分14104帖子离线17447 天注册时间
可以使用CSS
input{background:url();border:0;}
如果要鼠标经过改变背景，可以用A代替input，效果更容易控制；不使用A的话用伪类也可以，不过IE6 不认
UID550238在线时间 小时积分23帖子离线17447 天注册时间
新手上路, 积分 23, 距离下一级还需 27 积分
lS的方法行么？
我试了下，还是向下点击的效果
UID539020在线时间 小时积分901帖子离线17447 天注册时间
高级会员, 积分 901, 距离下一级还需 99 积分
回复：阿飞~~~~
根据版主的方法追加了STYLE，但是点击input，文字依然有晃动效果，如何才能使之静止呢？
UID563116在线时间 小时积分18帖子离线17447 天注册时间
新手上路, 积分 18, 距离下一级还需 32 积分
直接用CSS 应该可以实现 定义btn的样式
UID491699在线时间 小时积分4737帖子离线17447 天注册时间
金牌会员, 积分 4737, 距离下一级还需 263 积分
UA默认样式，恐怕这又是个无准确解的问题。
UID244377在线时间 小时积分3698帖子离线17447 天注册时间
把文字做在背景里
UID539020在线时间 小时积分901帖子离线17447 天注册时间
高级会员, 积分 901, 距离下一级还需 99 积分
回复 9# 14px
其实不光光文字会动，文字所在的区域都在动。。背景图也在动（目前项目中就是用的背景图，可是点击后背景图也是会动的，好难看的效果。。。）。。。所以。。很纠结。。
UID542318在线时间 小时积分75帖子离线17447 天注册时间
初级会员, 积分 75, 距离下一级还需 125 积分
VALUE=&&&&去掉 直接用个背景图&&就不会有你不想要的效果了&&不过不知道这样做好不好
UID527449在线时间 小时积分1722帖子离线17447 天注册时间
银牌会员, 积分 1722, 距离下一级还需 1278 积分
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&无标题文档&/title&
&style type=&text/css&&
* { margin:0 padding:0; }
.usersub {width:52 height:18 background:# border:0;
line-height:18 color:#454545; font-size:12
onfocus=&this.blur()&
class=&usersub& type=&submit& name=&Submit& value=&提交& /&
&input onfocus=&this.blur()& type=&image& name=&imageField& src=&/images/default/logo.gif& /&
&提示：您可以先修改部分代码再运行
第一种方法在ie6下文字还是会晃动。火狐跟ie8是正常的。
第二种方法是直接插入图片，不知道这样是否可行？
UID244377在线时间 小时积分3698帖子离线17447 天注册时间
回复 8# cwq2jxl [楼主] 的帖子
去掉边框，然后把文字做在背景里……
UID539020在线时间 小时积分901帖子离线17447 天注册时间
高级会员, 积分 901, 距离下一级还需 99 积分
回复 11# 14px
做到背景里，点击后还是会晃动的。。不信你试试。。
UID244377在线时间 小时积分3698帖子离线17447 天注册时间
&!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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&meta name=&author& content=&Chomo& /&
&link rel=&start& href=&& title=&Home& /&
&input type=&button& style=&background:url(/images/default/reply.gif) no- width:74 height:29 border:0& /&
&提示：您可以先修改部分代码再运行
这样就只有 IE8 比较龌龊了。
UID527449在线时间 小时积分1722帖子离线17447 天注册时间
银牌会员, 积分 1722, 距离下一级还需 1278 积分
回复 13# 14px
在火狐下还是会晃动的。。。
发现加个* { margin:0 padding:0; }，就可以了
Powered by所有回答(4)
这个我以前也注意到了，，但是我写过次样式，发现去不掉。。有的浏览器里面有 有的里面没有。。
园豆：1097
chorm& F12& 然后点击右下角 。设置，然后选择ios。然后慢慢调试吧。
webkit 内核，只能帮你这么多了。。
a{blr:expression(this.onFocus=this.close());} /* 只支持IE，过多使用效率低 */
a{blr:expression(this.onFocus=this.blur());} /* 只支持IE，过多使用效率低 */
a:focus { -moz-outline-style: none; } /* IE不支持 */
a:focus { outline: none; } /*很多网站都会加的属性*/
不同浏览器对文本框行高line-height的处理
除IE内核浏览器外，缺省line-height时都会自适应文本框的height。
IE下line-height对文本框有效，加上与相同的height后可以让IE也垂直居中。line-height超过height时，文本框获得焦点后拖动鼠标或按 上下键会出现上下滚动的现象。
Webkit内核下，当缺省line-height是，文本会自适应文本框height。 并且line-height对其有效。
Geoko下，它的值会随font-size的改变而改变（可以通过firebug来看计算样式），而不能由 网页开发人员来定义。
Geoko下，文本框获得焦点时的光标的大小由文本框的height决定，基本等于文本框的height。
Opera的表现最为优雅，line-height完全无效，文本始终垂直居中，光标也不会出现Geoko的 问题。
&&&您需要以后才能回答，未注册用户请先。

我要回帖

更多关于 input 蓝色边框 的文章

 

随机推荐