Home/ Questions/Q 7576807
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T17:00:44+00:00

I am attempting to use a JQuery Mobile select menu without having to use

  • 0

I am attempting to use a JQuery Mobile select menu without having to use the full framework and running into problems.

I would prefer to not use the full jquery mobile library because it adjusts my entire page and all controls, links on it and applies style’s to the page tag. This causes the look and feel to be adjusted for the whole page. I am using adaptive web design to adjust the pages controls and have been able to successfully apply the JQuery Mobile look and feel for the text boxes when the max-width hits 680, this looks great but my select boxes look bad when applying those same styles. Specifically the drop down arrow is chopped off on the right because of the rounded edges. If possible I would love to have the same look as the text boxes applied to the select menu’s and control everything in the CSS file but if there is a trimmed down .js library for select menu’s that would be a viable option too.

Has anyone successfully applied the JQuery Mobile look and feel for select boxes with just CSS? Has anyone used a narrow JQuery Mobile library that allows you to target just select menu’s and doesn’t require the entire JQuery Mobile .js library or style sheets?

Any help will be greatly appreciated! Thanks in advance.

I did manage to get some CSS that looks like it might be the start of what I need but the drop down is invisible, though it is clickable and shows the options when you select it. I think this might be tied to the javascript that JQM is running to apply the select drop down style. Below is the CSS though, maybe I’m just missing something.

box-sizing: border-box;-webkit-box-align: center;border: 1px solid;
border-image: initial;white-space: pre;-webkit-rtl-ordering: logical;
color: black;background-color: white;cursor: pointer;
-webkit-appearance: button;left: 0;top: 0;
width: 100%;min-height: 1.5em;min-height: 100%;height: 3em;
max-height: 100%;opacity: 0;-ms-filter: "alpha(opacity=0)";filter: alpha(opacity=0);
z-index: 2;cursor:pointer;-webkit-appearance:button;left:0;top:0;width:100%;min-height:1.5em;min-height:100%;height:3em;max-height:100%;opacity:0;-ms-filter:"alpha(opacity=0)";filter:alpha(opacity=0);z-index:2
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I managed to get this working using just CSS (below). This is working and tested on IE9, Chrome, FF and Safari. I thought I would post the response here in case there is anyone else that is up against this issue. This worked well for me when using adaptive web design and adjusting my text fields (and selects) when the browser hit a certain threshold so that it had a more mobile look and feel when viewed on a tablet or phone.

    select  
{
    height:32px; -webkit-appearance: button;
    -webkit-border-radius: 20px;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    -webkit-user-select: auto;
    background: url(../Content/Images/selector_trans.png), 
    -webkit-linear-gradient(#E5E5E5, #E5E5E5 40%, #E2E2E2);
    background-position: 100% 53%, center center;        
    background-repeat: no-repeat, repeat-x; 
}
    • 0