Question

如何将现有的自定义下拉框转换为可编辑的下拉框。是否可以将输入框放置在投递箱所在的位置？是否有可能在不加载任何重型框架的情况下实现这一目标？

以下是当前的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>

Answer 1

没有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);

制作一个可编辑的下拉框

1 个答案: