How to set Android WebView background of selected textbox...

Question

Ive got a input tag in an HTML page in an Android WebView. I want the background to be transparent. It is (via background-color: transparent) UNTIL the user selects it (gives it focus, to input data). Then the background is white.

I've tried background-color on textbox and textbox:focus and Ive tried -webkit-appearance: none. None of these worked.

Anyone messed with this?

Answer 1

I might be wrong, but this actually looks like a bit of a bug in the android.webkit package code. It seems that WebView uses the android.webkit.TextDialog class to represent input boxes even in the rendered HTML.

However, that code is hiding webkit's rendering with android's text widget. Note the LayerDrawable variable layers, the call to setBackgroundDrawable() and the two layers in the LayerDrawable, where the bottom one is set to always be white.

As you can see, the WebCore-rendered text is here hidden behind this white background. The comment even goes so far as to explicitly state this.

Of course, the TextDialog variable mTextEntry in WebView.java will not be focused until the text box is focused, so until then not hiding what webkit is rendering.

/**
 * Create a new TextDialog.
 * @param   context The Context for this TextDialog.
 * @param   webView The WebView that created this.
 */
/* package */ TextDialog(Context context, WebView webView) {
    super(context);
    mWebView = webView;
    ShapeDrawable background = new ShapeDrawable(new RectShape());
    Paint shapePaint = background.getPaint();
    shapePaint.setStyle(Paint.Style.STROKE);
    ColorDrawable color = new ColorDrawable(Color.WHITE);
    Drawable[] array = new Drawable[2];
    array[0] = color;
    array[1] = background;
    LayerDrawable layers = new LayerDrawable(array);
    // Hide WebCore's text behind this and allow the WebView
    // to draw its own focusring.
    setBackgroundDrawable(layers);
    // Align the text better with the text behind it, so moving
    // off of the textfield will not appear to move the text.
    setPadding(3, 2, 0, 0);
    mMaxLength = -1;
    // Turn on subpixel text, and turn off kerning, so it better matches
    // the text in webkit.
    TextPaint paint = getPaint();
    int flags = paint.getFlags() | Paint.SUBPIXEL_TEXT_FLAG |
            Paint.ANTI_ALIAS_FLAG & ~Paint.DEV_KERN_TEXT_FLAG;
    paint.setFlags(flags);
    // Set the text color to black, regardless of the theme.  This ensures
    // that other applications that use embedded WebViews will properly
    // display the text in textfields.
    setTextColor(Color.BLACK);
    setImeOptions(EditorInfo.IME_ACTION_NONE);
 }

The source code in git.

Answer 2

It appears this has been fixed in Android 2.1.