gpt4 book ai didi

google-chrome - Chrome CSS3 框阴影文本字段问题

转载 作者:行者123 更新时间:2023-11-28 11:15:33 24 4
gpt4 key购买 nike

在将框阴影应用于文本输入时,有人在 Google Chrome 中遇到过问题吗?我有一个模糊的问题,在输入输入时,框阴影有时会加倍。我已经尝试了几件事,但似乎没有什么可以解决的。最糟糕的是,这个问题非常不一致。要半一致地出现此问题,我唯一能做的就是每次都重置浏览器缓存。

enter image description here

应用于输入的 CSS 如下:

input[type=text] {
padding: 7px 0 7px 10px;
height: 14px;
border: 1px solid #dadada;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-ms-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: #e4e4e4 4px 5px 10px inset;
-webkit-box-shadow: #e4e4e4 4px 5px 10px inset;
-o-box-shadow: #e4e4e4 4px 5px 10px inset;
box-shadow: #e4e4e4 4px 5px 10px inset;
}

input[type=text]:focus {
outline: none;
}

这是一个正在运行的代码的 JSFiddle。 http://jsfiddle.net/S5xzM/

任何见解将不胜感激!

[编辑] 目前发生这种情况的 Chrome 版本是 14.0.835

最佳答案

有趣的问题!

这绝对是一个 Webkit 错误。只有当您将 outline: none; 放在焦点伪选择器上时才会发生这种情况。

这是我能找到的唯一解决方法:

input[type=text]:focus {
outline-color: rgba(255,255,255,0);
outline-offset: 10px;
}

我尝试了各种方法,比如outline-width: 0,或者outline-color: transparent,但是都没有用。

http://jsfiddle.net/Gvh2L/

关于google-chrome - Chrome CSS3 框阴影文本字段问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7743983/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com