iPhone Vs browser : CSS for right align clear icon in text box - iphone

Question

I have seen same kind of issues in stack overflow itself. Still asking it because I am facing the following issue.
I have a textbox which has a clear icon on the right side.
And in the textbox there is a smartfill (autofilling data).
Need this to work fine in desktop browser / iphone browser / or in any mobile browser. !
HTML
<div class="outerWrapper">
<div id="mainContainer">
<label>Smartfill box
<span class="ui-icon-delete"></span>
<input type="text" placeholder="" onkeydown="smartfill()" autocomplete="off" />
<div id="smartFill1" class="smartFillBox">
<li><div>first</div>starts here</li>
<li><div>Second</div>Goes here</li>
<li><div>Third</div>Goes here</li>
<li><div>Fourth</div>Goes here</li>
</div>
</label>
</div>
</div>
CSS
/* Main css --------------------*/
.outerWrapper label input[type="text"], .outerWrapper label input[type="url"], .outerWrapper label input[type="email"], .outerWrapper label input[type="password"], .outerWrapper label input[type="tel"] {
margin-top: 0.3em;
padding: 0;
}
input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="tel"] {
-moz-appearance: none;
border: 1px solid #CECECE;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 4px 8px #E1E1E1 inset;
display: block;
font-size: 20px;
margin: 0;
min-height: 40px;
width: 98%;
}
.outerWrapper label {
display: block;
font-size: 16px;
padding-bottom: 7px;
}
#mainContainer {
font-size: 14px;
margin-bottom: 30px;
margin-left: 15px;
margin-right: 15px;
}
/* site css --------------------*/
.ui-icon-delete {
background-attachment: scroll;
background-image: url("http://www.autoweek.com/assets/losangeles/closeButton.png");
background-origin: padding-box;
background-position: 0 50%;
background-repeat: no-repeat;
cursor: pointer;
display: none;
float: right;
height: 29px;
margin: 0 3px;
padding: 0;
position: relative;
right: 0.3%;
top: 36px;
width: 4%;
display: inline;
}
.smartFillBox {
height: 50px;
margin: -1px 0 0;
width: 98%;
display: block;
}
.smartFillBox li {
border-bottom: 1px solid #CECECE;
border-left: 1px solid #CECECE;
border-right: 1px solid #CECECE;
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
JsFiddle link for my issue is here : http://jsfiddle.net/smilyface/ze3sA/
Here is a related link: http://jsfiddle.net/PJZmv/801/
I have 3 elements. 1)input-text-box 2)clear-icon 3)smartfill-div. I am not able to relate these three accordingly! I tried jsfiddle-related-link(given above) still I am getting the same issue. Not able to align correctly.