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’.
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.
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:
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.
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 兄弟一词,经得起流年. 的问题《Input has different style on focus [closed]》','https://www.manongdao.com/q-1305088.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
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)
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.