When it comes to Palm’s WebOS, something I have been struggling with for months is trying to re-style the default input boxes that Palm uses.  Up until now few if any apps have tried to alter the default Palm text field elements. 

Re-styling the text field element is made difficult not only because it’s really difficult and time consuming to use the inspector, but also because of how Palm implemented their text fields.

Getting Started

Palm’s text fields are declared using a simple div with the Palm attribute “x-mojo-element”.  When the scene is rendered this div is injected with several other elements.  The input tag itself, a div that contains the hint text, and another div that contains a copy of the value of the text field, or more specifically what it was at the last time the field lost focus.

The biggest issue when trying to restyle the form fields was this div that contains the value of the input field.  This tag has no class, or usable ID to target and so you end up with two instances of your text field value being displayed.

The code below will render styled text boxes with nearly the same width as the default Palm buttons.  It also adds rounded corners in addition to hiding the div that contains the duplicate text.

CSS Markup

   1:  .textField input[type=text], 
.textField input[type=password] {
   2:     width:284px !important;
   3:     -webkit-border-radius:5px;
   4:     margin:10px;
   5:     padding:5px 5px;
   6:     border:4px solid #ccc;
   7:     display:block !important;
   8:  }
   9:   
  10:  .textField div:nth-child(2) 
{display:none;visibility:hidden;}
  11:   
  12:  .hint-text 
{margin:13px 0 0 20px !important;color:#666;}

HTML Markup

   1:  <div id="myTxtField" class="textField" 
name="textField" x-mojo-element="TextField"></div>

Note that several lines are wrapped for display purposes.

palm-ebos-styled-textfieldsIf all goes well you should end up with sexy looking text boxes similar to those in the screenshot to the left.  The data that is contained in the div is still available to Palm and to the framework, so this should have no effect on your data.

Best of luck, hope it works for everyone!  Cheers!