Changing height of jQuery Mobile “select” with jQuery?

Question

so this is a problem I'm having:

I want to style the height of the select to that of my input. The select uses the ui-btn-inner class which has padding, and when changed, the height of the select changes.

Here's the padding created by ui-btn-inner :

Here is my code:

    <div class="ui-grid-a">
        <div class="ui-block-a" style="width: 80%;">
            <div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
            Amount:
            </div>

            <input type="text" autocomplete="off" class="translate" placeholder="0.0" data-clear-btn="true" autofocus required autocorrect="off" autocapitalize="off" data-theme="d"/>

        </div>
        <div class="ui-block-b" style="width: 20%; padding-left: 15px;">
            <div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
            Amount:
            </div>

            <select name="select-choice-1" id="select-choice-1" data-theme="a" style="height: 40%; padding: 0; margin: 0;">
                    <option value="" style="padding: 0;">CAD</option>
                    <option value="" style="padding: 0;"></option>
            </select>

        </div>
    </div>

Notice wherever I put style="padding: 0;" it still doesn't affect the padding? jQuery Mobile generates code and I am unable to attach classes to that code.

I'm a complete noob at jQuery and have no idea how to simply change the height of this select..

Answer 1

You are missing the obvious.

Your original select is not longer visible. Also as you can see new one is just custom combination of <div>'s and <span>'s. New custom select box will not inherit css from the old one. New select box CSS structure needs to be changed in order for this to work.

Working example: http://jsfiddle.net/Gajotres/PMrDn/107/

HTML:

<div class="ui-grid-a">
    <div class="ui-block-a" style="width: 80%;">
        <div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
            Amount:
        </div>

        <input type="text" autocomplete="off" class="translate" placeholder="0.0" data-clear-btn="true" autofocus required autocorrect="off" autocapitalize="off" data-theme="d"/>

    </div>
    <div class="ui-block-b" style="width: 20%; padding-left: 15px;"  id="grid-container">
        <div data-role="content" class="accountTransferLabels" style="padding-left: 0;">
            Amount:
        </div>

        <select name="select-choice-1" id="select-choice-1" data-theme="a">
            <option value="" style="padding: 0;">CAD</option>
            <option value="" style="padding: 0;"></option>
        </select>

    </div>
</div>

CSS:

#grid-container .ui-select div span {
    padding-bottom: 0.14em  !important;
}

Or if you want for select box text to be perfectly centered take a look at this example: http://jsfiddle.net/Gajotres/PMrDn/108/

CSS:

#grid-container .ui-select div span {
    padding-top: 0.2em  !important;
    padding-bottom: 0.2em  !important;
}

grid-container is just an id given to the grid container, so we can affect only this select box. If we change .ui-select it will affect every single select box.