Input has different style on focus [closed]

Answer 1

You should be able to apply a different style by targeting that input and adding :focus. So for example:

input[type=password]:focus { border-radius: 5px; }

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.

Answer 2

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.

Answer 3

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)