How to implement such an arrow on select?

enter image description here

  • Open the site, the screenshot from which you made, but look in the inspector as there this arrow is made - andreymal
  • from psd mockup snapshot - Vasily
  • 2
    Then suppose that the author of the layout did not mean pixel-by-pixel redrawing of the arrow; most likely, we mean the usual <select> , in which a triangle with operating system styles is automatically added, check with it if possible - andreymal
  • through zhivkeri. - ishidex2
  • one
    @andreymal, or do not specify until he found out about it))) - Qwertiy ♦

4 answers 4

You can use the select2 plugin, which adds classes to the select, and then dim with css

    You can customize it as one of the options:

     $('.select').each(function(){ // Variables var $this = $(this), selectOption = $this.find('option'), selectOptionLength = selectOption.length, selectedOption = selectOption.filter(':selected'), dur = 500; $this.hide(); // Wrap all in select box $this.wrap('<div class="select"></div>'); // Style box $('<div>',{ class: 'select__gap', text: selectedOption.text() }).insertAfter($this); var selectGap = $this.next('.select__gap'), caret = selectGap.find('.caret'); // Add ul list $('<ul>',{ class: 'select__list' }).insertAfter(selectGap); var selectList = selectGap.next('.select__list'); // Add li - option items for(var i = 0; i < selectOptionLength; i++){ $('<li>',{ class: 'select__item', html: $('<span>',{ text: selectOption.eq(i).text() }) }) .attr('data-value', selectOption.eq(i).val()) .appendTo(selectList); } // Find all items var selectItem = selectList.find('li'); selectList.slideUp(0); selectGap.on('click', function(){ if(!$(this).hasClass('on')){ $(this).addClass('on'); selectList.slideDown(dur); selectItem.on('click', function(){ var chooseItem = $(this).data('value'); $('select').val(chooseItem).attr('selected', 'selected'); selectGap.text($(this).find('span').text()); selectList.slideUp(dur); selectGap.removeClass('on'); }); } else { $(this).removeClass('on'); selectList.slideUp(dur); } }); }); 
     * { box-sizing: border-box; } body { background: #2b3a46; margin: 0; padding: 0; } .select-wrap { padding: 1rem; } label { color: #fff; } .select__list { list-style-type: none; margin: 0; padding: 0; color: #000; background: #fff; border:1px solid #777; } .select { display: inline-block; vertical-align: top; } .select__gap { background: #fff; padding: 0 10px; width: 200px; position: relative; } .select__gap:before{ content: ''; width: 20px; position: absolute; top: 0; bottom: 0; right: 0; background: #ccc; border:1px solid #777; border-radius:1px; cursor:pointer; } .select__gap:after{ content: ''; display: block; width: 0px; height: 0px; position: absolute; right: 6px; top: 50%; margin-top: -1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #000; -webkit-transition: all .27s ease-in-out; -o-transition: all .27s ease-in-out; transition: all .27s ease-in-out; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); cursor:pointer; } 
     <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <!-- Customn select --> <div class="select-wrap"> <label for="selectId">Your Language: </label> <select name="select-box" id="selectId" class="select"> <option value="item-1" name="value" selected>item-1</option> <option value="item-2" name="value">item-2</option> <option value="item-3" name="value">item-3</option> <option value="item-4" name="value">item-4</option> <option value="item-5" name="value">item-5</option> <option value="item-6" name="value">item-6</option> </select> </div>

    And you can use the plugin (google select jquery plugin is easy to find).

    For example, the most popular select2 :

     $('select').select2(); 
     * { box-sizing: border-box; } body { background: #2b3a46; margin: 0; padding: 0; } .select-wrap { padding: 1rem; } label { color: #fff; } .select2-container { background: #fff; padding: 0 10px; width: 200px !important; } .select2-container--default .select2-selection--single { border: none !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { background: #ccc; border:1px solid #777; } .select2-container--default .select2-selection--single .select2-selection__arrow b{ border-color: #000 transparent transparent transparent !important; } 
     <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <div class="select-wrap"> <label for="selectId">Your Language: </label> <select name="select-box" id="selectId" class="select"> <option value="item-1" name="value" selected>item-1</option> <option value="item-2" name="value">item-2</option> <option value="item-3" name="value">item-3</option> <option value="item-4" name="value">item-4</option> <option value="item-5" name="value">item-5</option> <option value="item-6" name="value">item-6</option> </select> </div>

    • one
      Thanks, great jquery offer! - Vasily

    only in IE did not check, I just do not have it

     select { width: 150px; padding: 15px; height: 34px; /*убираешь иконку до дефолту*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; /*задаешь бекграунд ту икону которую хочешь и регулируешь позишеном*/ background: url(https://get.wallhere.com/photo/sunlight-landscape-forest-waterfall-water-nature-reflection-green-river-jungle-stream-rainforest-tree-watercourse-vegetation-woodland-habitat-natural-environment-body-of-water-old-growth-forest-water-feature-255589.jpg) no-repeat; background-position-x: 110px; } 
     <select name="sdsd" id="">sdsdsd <option value="">Выбор один</option> <option value="">Выбор два</option> </select>

    • This thing is a little more complicated. - Qwertiy ♦
    • I saw above in the answers, I just decided to display my simple version, all of a sudden, someone once ...))) there is only one minus that the height of the icon should not exceed the width select ʻa .... - Air
    • The downside is that a standard element is drawn in IE over this thing - this is the screen from IE11: i.stack.imgur.com/0bTwG.png . But IE10 + and Edge support styling with -ms-expand . Other answers are all with scripts: (Styling the arrow without scripts is possible for most browsers, but the design is more complicated there. - Qwertiy ♦
    • One could guess that))) oh, this IE ... I am allergic to it)) ... I felt this was immediately noted by the fact that I didn’t check it on IE ... - Air

    with psd layout snapshot

    This is a screenshot of the standard arrow, which was quite popular some time ago. Probably, you should leave select with a standard arrow and do nothing with it.