Android 2.3.4 - Html input type password has border with focus

Question

My htmlcode:

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

With my 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; } 

My goal is to remove boundaries. It works great in Firefox, Google Chrome, iPhone Safari, etc. Unfortunately, I have a problem with Android 2.3.4.

With Android, when I focus on the password field, I see a thin black frame ... I tried all the CSS combinations, nothing helped ...

Many thanks for your help!

Answer 1

-webkit-user-modify: read-write-plaintext-only; to remove a special style of styles in focus;)

This will remove the entire Webkit style with focused login on Android (PhoneGap)

Answer 2

For Android ICS, adding both should fix the problem:

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

Answer 3

I'm not sure which build you tested, but I ran into similar issues with WebKit 533.1 on Android. I decided to dig out the source code for the default styles . There are several default focus styles and 2, specific to the password type.

Our problem was related to the "outline" property. According to Mozilla MDN , "Outlines do not take up space; they are crossed out over content." (Emphasis mine.) In other words, the default outline styles were drawn over our border styles.

Try using outline styles instead of border styles or -webkit-tap-highlight-color.

Answer 4

change your style as follows:

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

Answer 5

It looks like the web browser that is included in Android 2.3 displays a special input field (native?) Above the html content when entering the password. This input field always has a black border of 1px and a white background.

A workaround is to use the <input type=text> field instead of the standard password field and add the -webkit-text-security: disc; .

But since Android 2.3 is no longer a priority platform, I will leave this problem with a black border, as in my project.