Question

我的htmlcode：

...
<input placeholder="Username" type="text" name="username" id="username">
<input id="inputPwd" placeholder="Password" type="password" name="password">
...

用我的CSS：

input {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: #000000;
  text-decoration: none;
  border: 0px solid white;
  outline: 0 none;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border: 0px solid #000000;         
    outline: 0 none;        
}

我的目标是删除边框。它适用于Firefox，谷歌浏览器，iPhone Safari等。不幸的是我有Android 2.3.4的问题。

使用Android时，我专注于“密码”字段，我看到薄黑边框......我尝试了所有CSS组合，没有任何帮助......

非常感谢您的帮助！

Answer 1

-webkit-user-modify: read-write-plaintext-only;用于删除焦点上的特殊样式;）

这将删除Android（PhoneGap）中焦点输入的所有Webkit样式

Answer 2

对于Android ICS，添加两者都可以解决问题：

-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color:rgba(0,0,0,0);

Answer 3

我不确定您正在测试哪个版本，但我在Android上遇到了与WebKit 533.1相似的问题。我决定dig into the source code for the default styles。有一些默认焦点样式和2个特定于“密码”类型。

我们的问题与“大纲”属性有关。 According to Mozilla's MDN，“大纲不占用空间，它们被绘制在内容之上。” （强调我的。）换句话说，默认的轮廓样式是在上面绘制我们的边框样式。

尝试操纵轮廓样式而不是边框或-webkit-tap-highlight-color样式。

Answer 4

改变你的风格：

input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
    -webkit-tap-highlight-color:none;
    border:none;         
    outline:none;        
}

Answer 5

当您输入密码时，Web浏览器（包含Android 2.3）会在html内容上显示一些特殊输入字段（本机？）。此输入字段始终具有1px黑色边框和白色背景。

解决方法是使用<input type=text>字段而不是标准密码字段，并添加-webkit-text-security: disc;样式。

但是，由于Android 2.3不再是优先平台，我将在项目中留下这个黑色边框问题。

Android 2.3.4 - Html输入类型密码具有焦点边框

5 个答案: