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.
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.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
