2016-12-28 8 views
6

मैं jQuery 1.11 का उपयोग कर रहा हूं। मैं अपने चयन ड्रॉप-डाउन को स्टाइल करना चाहता हूं क्योंकि चलो इसका सामना करते हैं, डिफ़ॉल्ट दिखता है। तो मैं कुछ शैलियोंमैं अपने स्टाइल वाले ड्रॉपडाउन में कीबोर्ड व्यवहार की नकल कैसे करूं?

.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; 
} 

मिल गया है और यह jQuery

$(function() { 

     $('select').each(function(){ 
      styleSelectMenu($(this)); 
     }); 

}); 

// This method applies the styles to our select menu 
function styleSelectMenu(selectMenu) 
{ 
    var $this = $(selectMenu), numberOfOptions = $(selectMenu).children('option').length; 

       /*** NEW - start ***/ 
       var $paddingCalculator = $('<div />', { 
       'class' : "select-styled test" 
    }).css({ 
       width : 0, 
     visibility : "hidden" 
    }).appendTo("body"); 
    $this.addClass('select-hidden'); 
    var paddingWidth = $paddingCalculator.outerWidth() + 10; 
    $paddingCalculator.remove(); 

    //var selectWidth = $this.width() + paddingWidth; 
    var selectWidth = $this.outerWidth() + paddingWidth; 
    //alert(selectWidth); 

    if (!$this.parent().hasClass('select')) { 
       var $wrapper = $("<div />", { 
         'class' : "select" 
     }).css({ 
         width : selectWidth 
     }); 
     $this.wrap($wrapper); 
    } // if 

       /*** NEW - end ***/ 

    if (!$this.next().hasClass('select-styled')) { 
     $this.after('<div class="select-styled"></div>'); 
    } // if 

    var $styledSelect = $this.next('div.select-styled'); 
    $styledSelect.text($this.children('option').eq(0).text()); 

    if ($styledSelect.parent().find('ul').length > 0) { 
     $styledSelect.parent().find('ul').remove(); 
    } // if 
    var $list = $('<ul />', { 
     'class': 'select-options' 
    }).insertAfter($styledSelect); 

    for (var i = 0; i < numberOfOptions; i++) { 
     $('<li />', { 
      text: $this.children('option').eq(i).text(), 
      rel: $this.children('option').eq(i).val() 
     }).appendTo($list); 
    } 

    var $listItems = $list.children('li'); 

    // This is the event when someone opens the list 
    $styledSelect.unbind('click') 
    $styledSelect.click(function(e) { 
     e.stopPropagation(); 
     $('div.select-styled.active').each(function(){ 
      $(this).removeClass('active').next('ul.select-options').hide(); 
     }); 
     $(this).toggleClass('active').next('ul.select-options').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, listToHide) 
{ 
    $(styledSelect).text(selectedText).removeClass('active'); 
    $(selectMenu).val($(selectMenu).attr('rel')); 
    $(listToHide).hide(); 
    // Select option in the underlying list so that the form gets submitted 
    // with the right values 
    selectedOption = $(selectMenu).find("option").filter(function() { return $(this).html() == selectedText; }); 
    $(selectMenu).find("option[selected='selected']").removeAttr("selected"); 
    $(selectedOption).attr("selected","selected"); 
}  // selectItemFromStyledList 

function clickListItem(event, styledSelect, selectMenu, listItemClicked, list) 
{ 
     var $styledSelect = $(styledSelect); 
     var $selectMenu = $(selectMenu); 
     var $listItem = $(listItemClicked); 
     var $list = $(list); 

     event.stopPropagation(); 
     var selectedText = $listItem.text(); 
     selectItemFromStyledList($styledSelect, $selectMenu, selectedText, $list) 
}  // clickListItem 

फिडल इस illustrating जोड़ा यहां है - http://jsfiddle.net/cwzjL2uw/1/। मुद्दा यह है कि, हालांकि मैंने शैली हासिल की है, मैं कीबोर्ड चयन को दोहराने में विफल रहा हूं जो सामान्य चयन मेनू में है। मेरा सवाल यह है कि, मैं अपना मेनू इस प्रकार कैसे व्यवहार कर सकता हूं कि जब मैं "ए" अक्षर पर क्लिक करता हूं, तो पहले "ए" आइटम का चयन किया जाता है (इस मामले में "अलबामा"), जैसे नियमित चयन मेनू व्यवहार करता है।

+0

मेनू सक्रिय होने पर कीप्रेस के लिए सुनो? – epascarello

+0

चूंकि आपने 'jquery-ui' टैग किया है, ऑटोकंपलेट का उपयोग करने के बारे में कैसे? (http://jqueryui.com/autocomplete/) - क्या आप jquery को अपग्रेड कर सकते हैं या आप 1.11 का उपयोग कर अटक गए हैं? – ochi

उत्तर

0

आप इसे इस तरह पूरा अपने कोड का उपयोग कर सकते हैं का एक उदाहरण है। अपने सक्रिय ड्रॉप डाउन पर कुंजियों को सुनकर और मिलान के लिए स्क्रॉल करने और स्क्रॉल करने के विकल्पों के माध्यम से पुनरावृत्ति करके।

function styleSelectMenu(selectMenu) 
{  
    ....... 

    $(document).click(function(event) { 
     $styledSelect.removeClass('active'); 
     $list.hide(); 
    }); 


    //Example 

    var keyUps = "", timeOut, $selectOptions = $('.select-options'); 
    $(document).keyup(function(event){ 
     if(!$selectOptions.prev().hasClass('active')){ 
     return false; 
     } 
     if(event.key){ 
     keyUps += event.key; 
     retrieveFromOptions($selectOptions,keyUps); 
    } 
    clearTimeout(timeOut); 
    timeOut = setTimeout(function(){ 
     keyUps = ""; 
    },250); 

    ....... 

}); 

function retrieveFromOptions($options,val){ 
    $options.find('li').each(function(index){ 
    if(this.textContent.substring(0,val.length).toLowerCase() === val.toLowerCase()){ 
     $options.scrollTop(43*index); 
     return false; 
    } 
    }); 
} 

Fiddle

सूचना है कि इस समाधान आइटम पर मँडरा के लिए एक चयन प्रभाव बराबर लागू नहीं करता है। ऐसा किया जा सकता है लेकिन अधिक काम की आवश्यकता होगी।

मैं कॉनर्सफ़ान या एक ऐसे समाधान का उपयोग करने की अनुशंसा करता हूं जहां केवल सीएसएस का चयन किए बिना चयन तत्व को स्टाइल करने के लिए उपयोग किया जाता है। इस तरह आप मूल कार्यक्षमता बनाए रखेंगे।

कई सीएसएस ढांचे हैं जो चुनिंदा तत्व की स्टाइल को लागू करते हैं।

Bootstrap एक उदाहरण है।

+0

ऐसा लगता है कि मुझे क्या चाहिए लेकिन आपको सेटटाइमआउट की आवश्यकता क्यों है? – Dave

+0

@ डेव मैंने निश्चित समय के बाद मूल्य में कुंजी को साफ़ करने के लिए सेटटाइमआउट का उपयोग किया था। ताकि अगर आप यूटा के लिए 'यू' टाइप करना चाहते हैं और फिर 1 सेकंड प्रतीक्षा करें और टेक्सास के लिए 'टी' टाइप करें, तो यह 'यूटी' पंजीकरण करने और यूटा में रहने के बजाय टेक्सास की तलाश करना होगा। जब तक आप एक दूसरे के दूसरे भाग के 1/4 के भीतर मूल्यों को तेज़ी से टाइप करते हैं, तो आप टेक्सास के लिए कई अक्षरों 'टेक्स' की खोज कर सकते हैं, लेकिन एक सेकंड के 1/4 के बाद खोज साफ़ हो जाती है, इसलिए यह कुछ नया के लिए तैयार है। सेटटाइमआउट उसमें मदद करता है। – Trevor

+0

@ कोई और प्रतिक्रिया, चिंताएं? आपकी पहली टिप्पणी के आधार पर, मुझे लगता है कि यह आपके लिए एक व्यवहार्य समाधान है। – Trevor

7

आप jQuery UI के selectmenu widget का उपयोग कर सकते हैं, और इसे अपनी पसंद के अनुसार शैलीबद्ध कर सकते हैं। चूंकि इसमें पहले से ही कीबोर्ड हैंडलिंग शामिल है, आपको केवल स्टाइल के बारे में चिंता करनी होगी।

$(function() { 
 
    $('select').selectmenu(); 
 
});
.ui-selectmenu-button 
 
{ 
 
    background: gray !important; 
 
    padding: 0.4em 0.8em !important; 
 
} 
 
.ui-selectmenu-button * 
 
{ 
 
    font-family: Verdana; 
 
    font-size: 12px; 
 
    color: white !important; 
 
} 
 
.ui-menu-item 
 
{ 
 
    font-family: Verdana; 
 
    font-size: 12px; 
 
    background: gray; 
 
    color: white; 
 
} 
 
.ui-selectmenu-menu ul 
 
{ 
 
    max-height: 170px; 
 
} 
 
/* Using base64 version of white down arrow */ 
 
.ui-icon { 
 
    background-image: url('data:image/png;base64,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')!important; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<select name="user[address_attributes][state_id]" id="user_address_attributes_state_id"> 
 
    <option value="">Select State</option> 
 
    <option value="3526">Alabama</option> 
 
    <option value="3556">Alaska</option> 
 
    <option value="3547">Arizona</option> 
 
    <option value="3510">Arkansas</option> 
 
    <option value="3542">California</option> 
 
    <option value="3543">Colorado</option> 
 
    <option value="3527">Connecticut</option> 
 
    <option value="3512">Delaware</option> 
 
    <option value="3513">Florida</option> 
 
    <option value="3514">Georgia</option> 
 
    <option value="3555">Hawaii</option> 
 
    <option value="3548">Idaho</option> 
 
    <option value="3529">Illinois</option> 
 
    <option value="3530">Indiana</option> 
 
    <option value="3528">Iowa</option> 
 
    <option value="3515">Kansas</option> 
 
    <option value="3557">Kentucky</option> 
 
    <option value="3516">Louisiana</option> 
 
    <option value="3531">Maine</option> 
 
    <option value="3517">Maryland</option> 
 
    <option value="3558">Massachusetts</option> 
 
    <option value="3532">Michigan</option> 
 
    <option value="3533">Minnesota</option> 
 
    <option value="3519">Mississippi</option> 
 
    <option value="3518">Missouri</option> 
 
    <option value="3549">Montana</option> 
 
    <option value="3534">Nebraska</option> 
 
    <option value="3545">Nevada</option> 
 
    <option value="3535">New Hampshire</option> 
 
    <option value="3536">New Jersey</option> 
 
    <option value="3544">New Mexico</option> 
 
    <option value="3537">New York</option> 
 
    <option value="3520">North Carolina</option> 
 
    <option value="3550">North Dakota</option> 
 
    <option value="3538">Ohio</option> 
 
    <option value="3521">Oklahoma</option> 
 
    <option value="3551">Oregon</option> 
 
    <option value="3559">Pennsylvania</option> 
 
    <option value="3539">Rhode Island</option> 
 
    <option value="3522">South Carolina</option> 
 
    <option value="3552">South Dakota</option> 
 
    <option value="3523">Tennessee</option> 
 
    <option value="3524">Texas</option> 
 
    <option value="3546">Utah</option> 
 
    <option value="3540">Vermont</option> 
 
    <option value="3560">Virginia</option> 
 
    <option value="3553">Washington</option> 
 
    <option value="3511">Washington, D.C.</option> 
 
    <option value="3525">West Virginia</option> 
 
    <option value="3541">Wisconsin</option> 
 
    <option value="3554">Wyoming</option> 
 
</select>

+0

धन्यवाद लेकिन यह काम नहीं करता है। योरो कोई स्निपेट चलाएं और फिर "एफ" अक्षर पर क्लिक करें। मैं फ्लोरिडा जाने की उम्मीद करता हूं, लेकिन कुछ भी नहीं होता है। मैं इसे मैक क्रोम पर चला रहा हूं, बीटीडब्ल्यू। – Dave

+0

@ डेव - मैंने इसे सफलतापूर्वक परीक्षण किया: (1) विंडोज़ पर आईई 11, फ़ायरफ़ॉक्स और क्रोम के साथ; (2) सफारी, फ़ायरफ़ॉक्स और क्रोम के साथ मैक पर। यह देखने के लिए कि क्या हो रहा है, आप "पूर्ण पृष्ठ" मोड में स्निपेट प्रदर्शित कर सकते हैं (चूंकि मेनू स्निपेट विंडो से लंबा है)। कीस्ट्रोक का जवाब देने के लिए, नियंत्रण में फोकस होना चाहिए। – ConnorsFan

+0

हाँ, चयनित तत्व –

0

यह सुविधा लागू करने के लिए तुच्छ नहीं है, और शामिल है के लिए कुछ कदम:

  1. उपयोगकर्ता लटकती खोलते हैं, तो देते हैं और स्वयं दस्तावेज़ कुंजी दबाने की घटनाओं के लिए सुनने के लिए घटना
  2. जब घटना निकाल दिया जाता है , उस सूची से चरित्र प्राप्त करें और उस अक्षर से शुरू होने वाले पहले तत्व की तलाश में
  3. अपने कंटेनर से संबंधित सूची आइटम की स्थिति प्राप्त करें, और उस स्थिति में कंटेनर को स्क्रॉल करें
  4. आपको भी के लिए जाँच करें अन्य प्रासंगिक कुंजी जैसे तीर ऊपर/नीचे, स्पेसबार इत्यादि।
  5. शरीर से श्रोता को दूर उपयोगकर्ता drowdown बंद करते हैं

आशा मैं याद आती है नहीं था कुछ भी

0

आप इस के लिए अपने कोड बदल सकते हैं:

$(function() { 
 

 
    $('select').each(function() { 
 
    styleSelectMenu($(this)); 
 
    }); 
 
}); 
 

 
// This method applies the styles to our select menu 
 
function styleSelectMenu(selectMenu) { 
 
    var $this = $(selectMenu), 
 
    numberOfOptions = $(selectMenu).children('option').length; 
 

 
    /*** NEW - start ***/ 
 
    var $paddingCalculator = $('<div />', { 
 
    'class': "select-styled test" 
 
    }).css({ 
 
    width: 0, 
 
    visibility: "hidden" 
 
    }).appendTo("body"); 
 
    $this.addClass('select-hidden'); 
 
    var paddingWidth = $paddingCalculator.outerWidth() + 10; 
 
    $paddingCalculator.remove(); 
 

 
    //var selectWidth = $this.width() + paddingWidth; 
 
    var selectWidth = $this.outerWidth() + paddingWidth; 
 
    //alert(selectWidth); 
 

 
    if (!$this.parent().hasClass('select')) { 
 
    var $wrapper = $("<div />", { 
 
     'class': "select" 
 
    }).css({ 
 
     width: selectWidth 
 
    }); 
 
    $this.wrap($wrapper); 
 
    } // if 
 

 
    /*** NEW - end ***/ 
 

 
    if (!$this.next().hasClass('select-styled')) { 
 
    $this.after('<div class="select-styled"></div>'); 
 
    } // if 
 

 
    var $styledSelect = $this.next('div.select-styled'); 
 
    $styledSelect.text($this.children('option').eq(0).text()); 
 

 
    if ($styledSelect.parent().find('ul').length > 0) { 
 
    $styledSelect.parent().find('ul').remove(); 
 
    } // if 
 
    var $list = $('<ul />', { 
 
    'class': 'select-options' 
 
    }).insertAfter($styledSelect); 
 

 
    for (var i = 0; i < numberOfOptions; i++) { 
 
    $('<li />', { 
 
     text: $this.children('option').eq(i).text(), 
 
     rel: $this.children('option').eq(i).val() 
 
    }).appendTo($list); 
 
    } 
 

 
    var $listItems = $list.children('li'); 
 

 
    // This is the event when someone opens the list 
 
    $styledSelect.unbind('click') 
 
    $styledSelect.click(function(e) { 
 
    e.stopPropagation(); 
 
    $('div.select-styled.active').each(function() { 
 
     $(this).removeClass('active').next('ul.select-options').hide(); 
 
    }); 
 
    $(this).toggleClass('active').next('ul.select-options').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, listToHide) { 
 
    $(styledSelect).text(selectedText).removeClass('active'); 
 
    $(selectMenu).val($(selectMenu).attr('rel')); 
 
    $(listToHide).hide(); 
 
    // Select option in the underlying list so that the form gets submitted 
 
    // with the right values 
 
    selectedOption = $(selectMenu).find("option").filter(function() { 
 
     return $(this).html() == selectedText; 
 
    }); 
 
    $(selectMenu).find("option[selected='selected']").removeAttr("selected"); 
 
    $(selectedOption).attr("selected", "selected"); 
 
    } // selectItemFromStyledList 
 

 
// Called when someone clicks an item from the styled list 
 
// The event data should contain the following parameters: 
 
//  styledSelect - the <div> element that contains the styled menu 
 
//  selectMenu - the actual form element that contains the items 
 
//  listItemClicked - the item that was clicked. 
 
//  list - THe <UL> element containig the <li> options 
 
function clickListItem(event, styledSelect, selectMenu, listItemClicked, list) { 
 
    var $styledSelect = $(styledSelect); 
 
    var $selectMenu = $(selectMenu); 
 
    var $listItem = $(listItemClicked); 
 
    var $list = $(list); 
 

 
    event.stopPropagation(); 
 
    var selectedText = $listItem.text(); 
 
    selectItemFromStyledList($styledSelect, $selectMenu, selectedText, $list) 
 
    } // clickListItem 
 

 
/* New Code */ 
 
// Prepare variable to get the entered text 
 
var text = ''; 
 

 
// Handle keydown 
 
jQuery(document).on("keypress", function(e) { 
 

 
    
 
    // Only handle event if the menu is open 
 
    if (jQuery(".select-styled").hasClass("active")) { 
 
    if (e.which != 8) { 
 
     var letter = String.fromCharCode(e.which); 
 

 
     // If backspace is pressed 
 
     text = text + letter; 
 

 

 
     jQuery(document).trigger("updateSelect"); 
 
    } 
 
    return false; 
 
    } 
 
}); 
 

 
jQuery(document).on("keydown", function(e) { 
 
    // Only handle event if the menu is open 
 
    if (jQuery(".select-styled").hasClass("active") && e.keyCode == 8) { 
 
    text = text.substring(0, text.length - 1); 
 

 

 
    jQuery(document).trigger("updateSelect"); 
 

 
    // If there is no match show original text 
 
    if (text.length == 0) 
 
     jQuery(".select-styled").text("Select State"); 
 
    return false; 
 
    } 
 
}); 
 

 
jQuery(document).on("updateSelect", function() { 
 

 
    jQuery(".select-styled").text(text); 
 

 

 
    // Hide all elements 
 
    jQuery(".select-options li").hide(); 
 

 
    // Show only matching elements 
 
    var matchingElements = jQuery(".select-options li:icontains('" + text + "')"); 
 
    matchingElements.show(); 
 

 
    return false; 
 
}); 
 

 
// Add case insitive contains expression 
 
$.expr[":"].icontains = $.expr.createPseudo(function(arg) { 
 
    return function(elem) { 
 
    return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) == 0; 
 
    }; 
 
});
/* line 63, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */ 
 

 
.selectMenu { 
 
    font-family: 'Oxygen', sans-serif; 
 
    font-size: 20px; 
 
    height: 50px; 
 
    -webkit-appearance: menulist-button; 
 
} 
 
/* line 70, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */ 
 

 
.select-hidden { 
 
    display: none; 
 
    visibility: hidden; 
 
    padding-right: 10px; 
 
} 
 
/* line 76, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */ 
 

 
.select { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    position: relative; 
 
    font-size: 16px; 
 
    color: #fff; 
 
    width: 220px; 
 
    height: 42px; 
 
} 
 
/* line 85, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */ 
 

 
.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; 
 
} 
 
/* line 94, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */ 
 

 
.select-styled:after { 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    border: 7px solid transparent; 
 
    border-color: #fff transparent transparent transparent; 
 
    position: absolute; 
 
    top: 16px; 
 
    right: 10px; 
 
} 
 
/* line 104, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */ 
 

 
.select-styled:hover { 
 
    background-color: #7b7b7b; 
 
} 
 
/* line 107, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */ 
 

 
.select-styled:active, 
 
.select-styled.active { 
 
    background-color: #737373; 
 
} 
 
/* line 109, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */ 
 

 
.select-styled:active:after, 
 
.select-styled.active:after { 
 
    top: 9px; 
 
    border-color: transparent transparent #fff transparent; 
 
} 
 
/* line 116, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */ 
 

 
.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; 
 
} 
 
/* line 128, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */ 
 

 
.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; 
 
} 
 
/* line 134, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */ 
 

 
.select-options li:hover { 
 
    color: gray; 
 
    background: #fff; 
 
} 
 
/* line 138, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */ 
 

 
.select-options li[rel="hide"] { 
 
    display: none; 
 
} 
 
/* line 144, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */ 
 

 
ul.select-options { 
 
    max-height: 15em; 
 
    overflow-y: scroll; 
 
    overflow-x: hidden; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="selectField selectMenu form-control" name="user[address_attributes][state_id]" id="user_address_attributes_state_id"> 
 
    <option value="">Select State</option> 
 
    <option value="3526">Alabama</option> 
 
    <option value="3556">Alaska</option> 
 
    <option value="3547">Arizona</option> 
 
    <option value="3510">Arkansas</option> 
 
    <option value="3542">California</option> 
 
    <option value="3543">Colorado</option> 
 
    <option value="3527">Connecticut</option> 
 
    <option value="3512">Delaware</option> 
 
    <option value="3513">Florida</option> 
 
    <option value="3514">Georgia</option> 
 
    <option value="3555">Hawaii</option> 
 
    <option value="3548">Idaho</option> 
 
    <option value="3529">Illinois</option> 
 
    <option value="3530">Indiana</option> 
 
    <option value="3528">Iowa</option> 
 
    <option value="3515">Kansas</option> 
 
    <option value="3557">Kentucky</option> 
 
    <option value="3516">Louisiana</option> 
 
    <option value="3531">Maine</option> 
 
    <option value="3517">Maryland</option> 
 
    <option value="3558">Massachusetts</option> 
 
    <option value="3532">Michigan</option> 
 
    <option value="3533">Minnesota</option> 
 
    <option value="3519">Mississippi</option> 
 
    <option value="3518">Missouri</option> 
 
    <option value="3549">Montana</option> 
 
    <option value="3534">Nebraska</option> 
 
    <option value="3545">Nevada</option> 
 
    <option value="3535">New Hampshire</option> 
 
    <option value="3536">New Jersey</option> 
 
    <option value="3544">New Mexico</option> 
 
    <option value="3537">New York</option> 
 
    <option value="3520">North Carolina</option> 
 
    <option value="3550">North Dakota</option> 
 
    <option value="3538">Ohio</option> 
 
    <option value="3521">Oklahoma</option> 
 
    <option value="3551">Oregon</option> 
 
    <option value="3559">Pennsylvania</option> 
 
    <option value="3539">Rhode Island</option> 
 
    <option value="3522">South Carolina</option> 
 
    <option value="3552">South Dakota</option> 
 
    <option value="3523">Tennessee</option> 
 
    <option value="3524">Texas</option> 
 
    <option value="3546">Utah</option> 
 
    <option value="3540">Vermont</option> 
 
    <option value="3560">Virginia</option> 
 
    <option value="3553">Washington</option> 
 
    <option value="3511">Washington, D.C.</option> 
 
    <option value="3525">West Virginia</option> 
 
    <option value="3541">Wisconsin</option> 
 
    <option value="3554">Wyoming</option> 
 
</select>

और यहां एक JSFiddle है: http://jsfiddle.net/noevLzno/2/

संबंधित मुद्दे