Android 2.3.4 - Html тип ввода пароля имеет границу на фокус

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, Google Chrome, iPhone Safari и т. Д. К сожалению, у меня проблема с Android 2.3.4.

с Android, когда я сосредотачиваюсь на поле «пароль», я вижу тонкую черную окантовку ... Я попробовал все комбинации CSS, ничего не помогло ...

Большое спасибо заранее за вашу помощь!

Answer 1

-webkit-user-modify: read-write-plaintext-only; для удалить в.п. специальный стиль в фокусе;)

Это удалить все стиль Webkit на ориентированной входе в Android (PhoneGap)

Answer 2

для Android ICS, добавив оба должны решить эту проблему:

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

Answer 3

Я не уверен, какой сборкой вы тестировали, но я столкнулся с аналогичными проблемами с WebKit 533.1 на Android. Я решил dig into the source code for the default styles. Существует несколько стилей фокуса по умолчанию и 2, характерных для типа «пароль».

Наша проблема была связана с «контуром». According to Mozilla's MDN, «Контуры не занимают места, они начертаны над содержанием». (Emphasis mine.) Другими словами, стили схемы по умолчанию были нарисованы выше наших стилей границ.

Попробуйте использовать стили контуров вместо стилей границы или -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

Похоже, веб-браузер, который входит в Android 2.3, отображает некоторые специальные поля ввода (родной?) Над содержанием HTML, когда вы вводите пароль. Это поле ввода всегда имеет 1px черную границу и белый фон.

Обходным путем является использование поля <input type=text> вместо стандартного поля пароля и добавления стиля -webkit-text-security: disc;.

Но поскольку Android 2.3 больше не является приоритетной платформой, я оставлю эту проблему с черной границей, как в моем проекте.