Better way to set size of input textbox across platforms?

问题

Update is below code chunks.

Original Question: I have an input field that is extending well beyond the rest of the page, but as the question alludes to, it appears fine in iOS3/4/5.

I am wondering if anyone has run into this issue. My search button, which in iOS is on the right of the search textbox, actually wraps to the next "line" on other platforms.

Code is below:

HTML

<form action="/jsp/mobile_files/results.jsp" method="get" autocorrect="off"     autocapitalize="off">
<h1><input class="keyword_search" type="text" name="keywords" maxlength="50" size="36" value="" /><input type="submit" class="keyword_submit" value="Go" /></h1>
</form>

The two relevant CSS classes are:

 /* input[type="submit"] */
 .keyword_submit
 {
   background: #666666;  /* grey */
   color: #FFFFFF;  /* white */
   font-weight: bold;
   font-size: 60%;
   line-height: 1.45em; /* 1.45 with 60% font-size */

   margin-left: -4px; /* to do - needs to be -12 for desktop */
   padding-bottom: 1px;


   -moz-border-radius: 10px;       /* for mozilla firefox */

   /* NOTE: CSS3 rounded corners not work on iPhone 3G with iOS 3.x */
   border-radius: 10px;

   /* webkit rounded corners work on iPhone 3G with iOS 3.x */
   -webkit-border-radius: 10px;


   -moz-border-radius-topleft: 0px;      /* for mozilla firefox */
   -moz-border-radius-bottomleft: 0px;

   /* NOTE: CSS3 rounded corners not work on iPhone 3G with iOS 3.x */
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;

   /* but this does work on iPhone 3G with iOS 3.x */
   -webkit-border-top-left-radius: 0px;
   -webkit-border-bottom-left-radius: 0px;

   /* to do - possible without this??  We lose the gradient! */
   -webkit-appearance: none;
 }

and

/* input[type="text"] */
  .keyword_search {
    background: #F1F1F1;  /* faded white */
    color: #333333;  /* dark */
    font-weight: bold;

    /* to do - looks better on iOS with larger font */
    /*
    font-size: 80%;
    */

    -moz-border-radius: 10px;       /* for mozilla firefox */

    /* NOTE: CSS3 rounded corners not work on iPhone 3G with iOS 3.x */
    border-radius: 10px;

    /* webkit rounded corners work on iPhone 3G with iOS 3.x */
    -webkit-border-radius: 10px;

    margin-left: 0.75em; /* moves entry field to the right */
    padding-left: 0.6em; /* moves text start cursor in the entry field to the right */

    /* for mozilla firefox */
    -moz-border-radius-topright: 0px;      
    -moz-border-radius-bottomright: 0px;

    /* NOTE: CSS3 rounded corners not work on iPhone 3G with iOS 3.x */
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;

    /* but this does work on iPhone 3G with iOS 3.x */
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
  }

Updated Question Screenshots can be seen at http://i.stack.imgur.com/5f7C8.jpg I would post it here, but I need more than 10 reputation to post images. You can see in the Android image what happens if the size on my input is set too large for any platform. To make it fit on the BlackBerry, you can see what it does to the size rendered in iOS. All three img's have size set to the same value (="10")... and you can see the result in the different platforms.

<input class="keyword_search" type="number" name="job_order_id" maxlength="7" size="10" value="" />
<input type="submit" class="keyword_submit" value="Go" />

Suggestions for a better way to control the size? Can I use %, em, px or some unit that will be more consistent across platforms? (I'll worry about getting rid of the gap,size of the button and other tweaks after I get the size sorted out)

回答1:

When coming back to try a few other things, I notice that I was mistaken. The above comment was made using size=#%, but when you use width: #%; it eliminates the wide variance across platforms.

来源：https://stackoverflow.com/questions/8251358/better-way-to-set-size-of-input-textbox-across-platforms

标签

android

html

css

ios

blackberry