androidhtcsense

Input-Elements in WebViews always have the same style if highlighted on HTC Devices

I'm currently writing an app which uses an embedded WebView to display its content or to sometimes query data from the user using input forms. The input fields in these forms are styled using -webkit-css Styles.

This works fine on all Devices (tested on Nexus One, LG Optimus 500, Samsung Galaxy S) so far, except on Devices with HTC Sense. On Devices with HTC Sense the styling gets lost if the input element gets selected. Using input:focus {} in the css doesn't help, the HTC Devices with Sense simply ignore.

This image illustrates it, the "Nickname" is currently selected but should still be styled the same way like "Vorname" and "Nachname" are.

Focus Problem

Any ideas to maybe workaround this problem?

Here is a sample HTML page (upon 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 into an app, simply put it on a web server somewhere and use the built in web browser to open it.

Solution

  • It could be related to: How can I style an HTML INPUT tag so it maintains CSS when focused on Android 2.2+?.

    Alternatively, you may be to work-around it by using a native app containing a WebView, and then apply a theme in res/values/themes.xml to your app which overrides 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 to you app 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 simply load your html in to your WebView and see if the text input control has adopted the new style.