Login/Register
Input-Elements in WebViews always have the same style if highlighted on HTC Devices
Asked Answered
Solved androidhtcsense
S

1

17

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.

Salley answered 2/3, 2011 at 15:56 Comment(1)
Posting some example code might help get answers. I have an original Desire A8181 which I'd be prepared to test on but I'd need example code to reproduce the scenario. – Sommers
O
5

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.

Ottillia answered 6/4, 2011 at 9:4 Comment(5)
Hi Mark, thanks for looking into this (+1 for this). I tried the suggestion from the link, focus() works without the ugly Sense Styling, but if I type anything on the keyboard, the ugly box is overlayed again and the keyboard behaves very strange (as mentioned in the bug). I couldn't try your suggestion yet, as "webTextViewStyle" is only available in Android >= 2.2, and my app is required to run on 2.1. – Salley
Hi, you could try using "textViewStyle" instead of "webTextViewStyle" (or maybe both for 2.2+). That might do the trick. – Ottillia
no, using "textViewStyle" doesn't help, simply no change. I set the style to "@null" or do I need to specify some dummy style? – Salley
You could try setting it to "@null" but I suspect that this won't work if Sense is applying its own styling after the Android OS does its styling. Unfortunately this is the problem with manufacturers & carriers putting their own UI layers on top of Android - they can sometimes be a little hacky and block you from doing some quite legitimate UI style tweaks. From the problems that I've seen, Sense appears to be one of the less-friendly environments for webapps for precisely this reason. Sorry that you haven't been able to resolve your problem. – Ottillia
The app was released in the meantime, so I think, we have to live with that. Thanks for the explaination. – Salley

© 2022 - 2024 — McMap. All rights reserved.