输入在焦点上有不同的样式
我正在使用 Phonegap 开发 Android 应用程序,但遇到了问题...输入有不同的背景、焦点上的边框和阴影(见下文)。应该注意的是,这仅适用于输入类型“密码”。
我该如何解决这个问题?提前致谢!
I am developing an Android app with Phonegap, but I ran into a problem... Input has a different background, border and shadow on focus (see below). It should be noted that this applies only to input type ‘password’.
How do I fix this? Thanks in advance!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
Android-WebKit-Browser 似乎在焦点上的输入类型“密码”上添加了一个特殊的覆盖框(我认为应用这种特殊的移动屏蔽,其中输入的最后一个字母仍然可见),它忽略除“
”之外的所有样式-webkit-tap-highlight-color
”属性。所以你会很不幸地设计这些输入框。顺便提一句。输入框的样式在具有 HTC Sense 的设备上根本不起作用,请查看此处:
如果在 HTC 设备上突出显示,WebView 中的输入元素始终具有相同的样式
哦,一个例外:样式似乎适用于三星设备(至少在 Galaxy S 和 I5800 上)
The Android-WebKit-Browser seems to add a special overlay box to the input type "password" on focus (I think to apply this special mobile masking where the last letter typed is still visible) which ignores all styling except the "
-webkit-tap-highlight-color
" property.So you will be out of luck styling these input boxes. Btw. styling of input boxes doesn't work at all on devices with HTC Sense, have a look here:
Input-Elements in WebViews always have the same style if highlighted on HTC Devices
Oh, one exception: the stylings seem to work on samsung devices (at least on Galaxy S and I5800)
我们在 HTC 设备上遇到了一个问题,即只要在动画上显示表单,CSS3 转换就会导致显示“双重密码”框。
基本上,Android 创建的覆盖层将绘制在屏幕底部,而不管实际 HTML 表单标记的呈现位置。
每次您在密码字段中输入时,Android 都会更新这两个框。看起来很可怕。它通常会在输入字段失去焦点后消失......通常。
由于尝试强制样式不起作用,因此我们必须确保 -webkit-backface-visibility 设置为“”(而不是“隐藏”)。每当输入表单为显示。
we ran into an issue on HTC devices where CSS3 transitions would cause a "double password" box being displayed whenever a form was being displayed over the animations.
Basically the Android-created overlay would be drawn in the bottom of the screen, irrespective of where the actual HTML form markup was rendered.
Every time you typed in the password field, Android would update both boxes. Looks horrendous. It usually disappears after the input field loses focus...usually.
Since trying to force a style didn't work, we instead had to make sure the -webkit-backface-visibility was set to '' (instead of 'hidden'). whenever the input form as being shown.
您应该能够通过定位该输入并添加
:focus
来应用不同的样式。例如:假设输入的密码类型为圆角。然后只需从其他输入复制其余样式即可进行匹配。
You should be able to apply a different style by targeting that input and adding
:focus
. So for example:Assuming that the input is of the type password that would give it rounded corners. Then just copy the rest of the styling from the other inputs to match.