jquery

How do I mimic keyboard behavior in my styled select dropdown?  #angularjs #reactjs

  • The issue is, although I have achieved the style, I have failed to replicate the keyboard behavior that a normal select menu has.
  • $(function () { $(‘select’).selectmenu(); }); .ui-selectmenu-button { background: gray !important; } .ui-selectmenu-button * { font-family: Verdana; color: white !important; } .ui-menu-item { font-family: Verdana; background: gray; color: white; } .ui-selectmenu-menu ul { max-height: 350px; } /* Using base64 version of white down arrow */ .
  • toggle(); }); // This is the event when someone actually selects something from the list $listItems.unbind(‘click.selectStyledItem’) $listItems.bind(‘click.selectStyledItem’, function(event) { clickListItem(event, $styledSelect, $this, $(this), $list); }); $(document).click(function(event) { $styledSelect.removeClass(‘active’); $list.hide(); }); var selectedIndex = $this[0].selectedIndex; if (selectedIndex > 0) { var name = $this.attr(“name”) var selectedText = $( “select[name='” + name + “‘] option:selected” ).text(); selectItemFromStyledList($styledSelect, $this, selectedText, $list); } // if } // This is the method that will select an item from the styled list function selectItemFromStyledList(styledSelect, selectMenu, selectedText,
  • Stack Overflow works best with JavaScript enabled
  • My question is, how can I make my menu behave such that when I click the letter “A,” the first “A” item is selected (in this case “Alabama”), just like a regular select menu behaves.

I’m using jQuery 1.11. I want to style my select drop-downs because, let’s face it, the default looks sucks. So I found some styles

@ng_real_ninja: How do I mimic keyboard behavior in my styled select dropdown? #angularjs #reactjs

I’m using jQuery 1.11. I want to style my select drop-downs because, let’s face it, the default looks sucks. So I found some styles

.selectMenu { font-family: ‘Oxygen’, sans-serif; font-size: 20px; height: 50px; -webkit-appearance: menulist-button; } .select-hidden { display: none; visibility: hidden; padding-right: 10px; } .select { cursor: pointer; display: inline-block; position: relative; font-size: 16px; color: #fff; width: 220px; height: 42px; } .select-styled { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: gray; padding: 11px 12px; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .select-styled:after { content: “”; width: 0; height: 0; border: 7px solid transparent; border-color: #fff transparent transparent transparent; position: absolute; top: 16px; right: 10px; } .select-styled:hover { background-color: #7b7b7b; } .select-styled:active, .select-styled.active { background-color: #737373; } .select-styled:active:after, .select-styled.active:after { top: 9px; border-color: transparent transparent #fff transparent; } .select-options { display: none; position: absolute; top: 100%; right: 0; left: 0; z-index: 999; margin: 0; padding: 0; list-style: none; background-color: #737373; overflow: scroll; } .select-options li { margin: 0; padding: 12px 0; text-indent: 15px; border-top: 1px solid #676767; -webkit-transition: all 0.15s ease-in; transition: all 0.15s ease-in; } .select-options li:hover { color: gray; background: #fff; } .select-options li[rel=”hide”] { display: none; } ul.select-options { max-height: 15em; overflow-y: scroll; overflow-x: hidden; }

and added this jQuery

jquery

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.