WebViews input elements always have the same style when highlighted on HTC devices

Question

WebViews input elements always have the same style when highlighted on HTC devices

I am currently writing an application that uses the built-in WebView to display its contents or sometimes requests data from the user using input forms. Input fields in these forms are styled using -webkit-css Styles.

This works great on all Devices (tested on Nexus One, LG Optimus 500, Samsung Galaxy S), except for devices with HTC Sense. On devices with HTC Sense, styling is lost if an input item is selected. Using input:focus {} in css doesn't help; HTC Devices with Sense is simply ignored.

This image illustrates this, "Nick" is currently selected, but should still be written in the same way as "Vorname" and "Nachname".

Focus problemm

Any ideas perhaps get around this problem?

Here is an example HTML page (on request):

 <html> <head> <meta name="viewport" content="target-densitydpi=low-dpi" /> <style type="text/css"> input[type="number"], input[type="text"]{ border: 1px solid #CDFF3C; background: #F3FECA; width: 220px; -webkit-border-radius: 4px; -webkit-box-shadow: inset 1px 1px 4px #AAA; -webkit-tap-highlight-color: rgba(205, 255, 60, 0.5); } body { background:#ebffb9; margin-right:0; margin-left:0; font-size: 14px; } </style> </head> <body> <form name="data" action="/im/postdata" method="get" accept-charset="UTF-8"> <p class="edit"> <b>Vorname</b> <br/> <input type="text" name="3"/> </input> </p> </form> </body> </html>

No need to embed this in an application, just put it on a web server somewhere and use the built-in web browser to open it.

+17

android htcsense

HefferWolf Mar 02 '11 at 15:56

source share

1 answer

Mark Allison · Accepted Answer · 2011-04-06 09:04

It could be related to: How can I style the HTML INPUT tag to support CSS when it focuses on Android 2.2+? .

Alternatively, you can get around it using your own application containing WebView, and then apply a theme in res / values /themes.xml to your application that redefines webTextViewStyle with your own style:

 <?xml version="1.0" encoding="utf-8"?> <resources> <style name="MyTheme" parent="@android:syle/Theme"> <item name="android:webTextViewStyle">@style/MyWebTextView</item> </style> </resources>

Then assign this application to you in the manifest:

 <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.mywebapp" android:versionCode="1" android:versionName="1"> <uses-permission android:name="android.permission.INTERNET" /> <application android:icon="@drawable/icon" android:label="@string/app_name" android:theme="@style/MyTheme"> . . . </application> </manifest>

Then just upload your html to your WebView and see if the input control accepts the new style text.

WebViews input elements always have the same style when highlighted on HTC devices

More articles: