Как я могу преобразовать существующий пользовательский раскрывающийся список в редактируемый раскрывающийся список. Возможно ли, что поле ввода может быть размещено там, где находится окно сбрасывания? Можно ли выполнить это без загрузки тяжелых каркасов?
Вот текущая разметка 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>
Никакая спецификация 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);