CODEWITHSUNDEEP
jquery-mobileheadericons
benoit
benoit

Reputation: 157

jQuerymobile : custom icon in header to open select

In my header, I have a custom icon to open a select menu.

The button is displayed without text, but it has the default appearance of Jquery mobile buttons like below :

enter image description here

<form name="actions" action="" method="post">
    <div class="ui-select ui-btn-right" data-inline="true">
        <select name="select-action" id="select-action" data-native-menu="true" data-icon="myapp-actions" data-iconpos="notext" data-inline="true" tabindex="-1">
            <option value="save">Save</option>
            <option value="print">Print</option>
            <option value="share">Share</option>
        </select>
    </div>
</form>

My aim is to get rid of the default background with the circle to have the icon bigger.

enter image description here

Is it possible to do that with jQuery mobile ?

I think I could add a normal link with my icon set as a background image in css, but I don't know how to make it show the select open.

Upvotes: 0

Views: 3283

Answers (1)

Phill Pafford
Phill Pafford

Reputation: 85308

You might need to tweak it here and there but you're going to have to override the CSS that jQM applies

CSS

.ui-icon-myapp-actions {
    background-image: url("https://i.sstatic.net/YP6jU.png");
    width:40px;
    height:36px;
}
.ui-btn-icon-notext {
    width:40px;
    height:36px;
}
.ui-btn-up-c {
    border: 0px;
}
.ui-btn-icon-notext .ui-btn-inner {
    padding: 0px;           
}
.ui-btn-inner {
    border-top: 0px;   
}

HTML

<form name="actions" action="" method="post">
    <div class="ui-select ui-btn-right" data-inline="true">
        <select name="select-action" id="select-action" data-icon="myapp-actions" tabindex="-1" data-inline="true" data-corners="false" data-iconshadow="false" data-shadow="false" data-iconpos="notext">
            <option value="save">Save</option>
            <option value="print">Print</option>
            <option value="share">Share</option>
        </select>
    </div>
</form>​

​

Upvotes: 2

Related Questions