Создание редактируемого выпадающего списка

Question

Создание редактируемого выпадающего списка

0

Как я могу преобразовать существующий пользовательский раскрывающийся список в редактируемый раскрывающийся список. Возможно ли, что поле ввода может быть размещено там, где находится окно сбрасывания? Можно ли выполнить это без загрузки тяжелых каркасов?

Вот текущая разметка HTML:

<html>

<style>
#select_box {
    position: absolute;
    width: 179px;
    clip:rect(2px 197px 19px 2px);
    top: -1px;
    font-size: 9pt;
    font-family: Arial;
}
#select_wrapper { 
    display: block;
    position: relative;
    width: 181px;
    border: 1px solid rgb(128,128,128);
    height: 21px;
    background: #ffffff;
}
</style>


<body>
                <div id="select_wrapper">
                    <select id="select_box">
                            <option value=""></option>
                            <option value="ONE">ONE</option>
                            <option value="TWO">TWO</option>
                            <option value="THREE">THREE</option>
                            <option value="FOUR">FOUR</option>
                            <option value="FIVE">FIVE</option>
                            <option value="SIX">SIX</option>
                    </select>
                </div>
</body>
</html>

John Smith 19 сен. 2013, в 18:25

Источник

Теги:

html

select

html5

css3

1 ответ

Ещё вопросы

Anton Essential · Accepted Answer · 2013-09-19T20-28-00.000Z

Никакая спецификация CSS3 не поддерживает выбор тега подробного редактирования. Вы можете использовать плагин jQuery Selectbox http://www.bulgaria-web-developers.com/projects/javascript/selectbox/. У меня была одна и та же проблема.) решение найдено) http://codepen.io/AntonEssenetial/pen/gGqel

CSS:

.pseselect {
    position: relative; // YOUR CONTAINER STYLE
    padding:;
    height:;
    border:;
    border-radius: ;
    background:;
    box-shadow:;
    font-size:;
    line-height:;
    cursor:;
    transition: .2s ease-in-out;
}

.pseselect::after {
    position: absolute;
    top:
    right:
    display: block;
    width:
    height:
    background: url( YOUR IMG ) center no-repeat;
    content: "";
}

.options {
    position: absolute;  YOUR SLECT STYLE
    z-index: ;
    display: none;
    border: ;
    border-radius: ;
    background: white;
    font-size: 13px;
}

.options > div {
    padding:;   
    font-weight: normal;
    cursor: pointer;
}

.options > div:hover {
    background: #eee;
}

HTML:

<div class="pseudo-select input-a">
  <div class="pseselect">Select</div>
  <div class="options">
     <div class="check" >Select</div>
     <div>Select</div>
     <div>Select</div>
     <div>Select</div>
  </div>
</div>

JavaScript:

(function($) {
    $(document).ready(
        function() {
            $('.pseselect').click(function() {
                $(this).parent().find('.options').fadeIn('fast');
            });
            $('.options').mouseleave(function() {
                $(this).fadeOut('fast');
            });
            $('.options > div').click(function() {
                $(this).closest('.pseudo-select').find('.pseselect').html($(this).html());
                $(this).closest('.pseudo-select').find('input').attr('value', $(this).attr('value'));
                $.each($(this).parent().children('div.check'), function() {
                    $(this).removeClass('check');
                });
                $(this).addClass('check');
                $(this).parent().fadeOut('fast');
            });
        }
    );
})(jQuery);