CSS attempt for [ #316246 ] Autocomplete: styling of button is incorrect and different in XForms Controls vs. Controls form

gistfile1.txt

/**
 * The structure of the HTML as seen by the browser can be summaries as follows:
 *
 *      div class="xbl-fr-autocomplete"
 *          div class="yui-ac"                                                              position: static (overrides YUI: relative, see comment below)
 *              span class="xforms-input"
 *                  input class="xforms-input-input"    Input in which users type           width: 140px, position: static (overrides YUI relative, see comment below)
 *              div class="xbl-fr-select1-button"       Component showing full itemset
 *              div class="yui-ac-container"                                                position: absolute
 *                  div class="yui-ac-content"          Suggestions                         position: absolute, overflow: hidden, width: 140px
 *
 *
 * For testing, to keep the suggestion list open while interacting with Firefox, disabled the display: none on the <div class="yui-ac-content">.
 */

/**
 * Override position: absolute in YUI, otherwise the the input is taken out of the flow and content after the
 * autocomplete will show under the input field. Only the yui-ac-content is position:absolute, not the .yui-ac.
 * The downside of this technique is that we can't automatically size the suggestion box based on the width of the input
 * field, and need to set the width of the input field and the suggestion box.
 */
.xbl-fr-autocomplete .xforms-input-input { position: static; width: 140px }
.xbl-fr-autocomplete .yui-ac { position: static }
.xbl-fr-autocomplete .yui-ac-content { width: 140px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }

/* Make the div that contains the text field inline-block so the component can be used in inline mode
   http://wiki.orbeon.com/forms/doc/contributor-guide/ie-bugs#TOC-Inline-block */
.xbl-fr-autocomplete .yui-ac {
    display: -moz-inline-box;
    display: inline-block;
    *zoom: 1;
    *display: inline;
    vertical-align: middle;
}

/* Always show the text field and the button on the same line */
.xbl-fr-autocomplete .yui-ac { white-space: nowrap }

/* Button inline, next to the text field */
.xbl-fr-autocomplete .xbl-fr-select1-button { vertical-align: middle; display: inline-block; *display: inline }

/* Get the input field vertically aligned on the button */
.xbl-fr-autocomplete .xbl-fr-select1-button .yui-menu-button { vertical-align: middle }
.xbl-fr-autocomplete input { vertical-align: middle }

/* Hide the text that would otherwise show in the button */
.xbl-fr-autocomplete .xbl-fr-select1-button .yui-menu-button button {
    width: 22px;
    text-indent: -9999px;
    *text-indent: 0;
    *padding-left: 9999px;
    padding-right: 15px;
    min-height: inherit;
    height: 1.6em
}

.xbl-fr-autocomplete button.fr-autocomplete-show-suggestions-button,
.xbl-fr-autocomplete .fr-autocomplete-show-suggestions-button button,
.xbl-fr-autocomplete .fr-autocomplete-show-suggestions-button button:hover {
    /* Override the min-height of 2em set in button.css. Ideally, we like to make the button exactly the same height
       as the text field, but this is a fairly decent approximation */
    min-height: 1.8em;
    /* The padding on the button should be enough, but without specifying a width, IE 7/8 shows the down arrow too
       much to the left */
    width: 25px;
    /* Center button vertically inside its container span */
    vertical-align: middle;
    /*margin-left: .5em;*/
}

.fr-grid .fr-grid-content .xbl-fr-autocomplete button.xforms-trigger,
.fr-grid .fr-grid-content .xbl-fr-autocomplete .xforms-trigger button {
    margin-top: 0 /* override FR style */
}

.xbl-fr-autocomplete .fr-autocomplete-show-suggestions-button span {
    display: -moz-inline-box;
    display: inline-block;
    width: 16px;
    height: 4px;
    margin-left: 1px;
    background: url("../../../ops/yui/button/assets/skins/sam/menu-button-arrow.png") no-repeat right center;

}