バニラJavascriptのカスタム選択ボックス

-2

var dropdown = document.querySelectorAll('.dropdown'); 
 
var dropdownArray = Array.prototype.slice.call(dropdown,0); 
 
dropdownArray.forEach(function(el){ 
 
    var button = el.querySelector('a[data-toggle="dropdown"]'), 
 
     menu = el.querySelector('.dropdown-menu'), 
 
     arrow = button.querySelector('i.icon-arrow'); 
 

 
    button.onclick = function(event) { 
 
    if(!menu.hasClass('show')) { 
 
     menu.classList.add('show'); 
 
     menu.classList.remove('hide'); 
 
     arrow.classList.add('open'); 
 
     arrow.classList.remove('close'); 
 
     event.preventDefault(); 
 
    } 
 
    else { 
 
     menu.classList.remove('show'); 
 
     menu.classList.add('hide'); 
 
     arrow.classList.remove('open'); 
 
     arrow.classList.add('close'); 
 
     event.preventDefault(); 
 
    } 
 
    }; 
 
}) 
 

 
Element.prototype.hasClass = function(className) { 
 
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className); 
 
};

.text-center { 
 
    text-align: center; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    -webkit-border-sizing: border-box; 
 
    -moz-border-sizing: border-box; 
 
    border-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 350px; 
 
    margin: 50px auto; 
 
    float:left; 
 
    margin-right:30px; 
 
} 
 
.container > ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0 0 20px 0; 
 
} 
 

 
.title { 
 
    font: normal 40px/1.4 'Pacifico', sans-serif; 
 
    text-align: center; 
 
    color: #2980B9; 
 
} 
 

 
.dropdown a { text-decoration: none; } 
 
.dropdown [data-toggle="dropdown"] { 
 
    position: relative; 
 
    display: block; 
 
    color: white; 
 
    background: #2980B9; 
 
    -webkit-box-shadow: 0 1px 0 #409ad5 inset, 
 
    0 -1px 0 #20638f inset; 
 
    -moz-box-shadow: 0 1px 0 #409ad5 inset, 
 
    0 -1px 0 #20638f inset; 
 
    box-shadow:   0 1px 0 #409ad5 inset, 
 
    0 -1px 0 #20638f inset; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); 
 
    padding: 10px; 
 
} 
 
.dropdown [data-toggle="dropdown"]:hover { background: #2c89c6; } 
 
.dropdown .icon-arrow { 
 
    position: absolute; 
 
    display: block; 
 
    font-size: 0.7em; 
 
    color: #fff; 
 
    top: 14px; 
 
    right: 10px; 
 
} 
 
.dropdown .icon-arrow.open { 
 
    -webkit-transform: rotate(-180deg); 
 
    -moz-transform: rotate(-180deg); 
 
    -ms-transform:  rotate(-180deg); 
 
    transform:   rotate(-180deg); 
 
    -webkit-transition: -webkit-transform 0.6s; 
 
    -moz-transition: -moz-transform 0.6s; 
 
    -o-transition:  -o-transform 0.6s; 
 
    transition:   transform 0.6s; 
 
} 
 
.dropdown .icon-arrow.close { 
 
    -webkit-transform: rotate(0); 
 
    -moz-transform: rotate(0); 
 
    -ms-transform:  rotate(0); 
 
    transform:   rotate(0); 
 
    -webkit-transition: -webkit-transform 0.6s; 
 
    -moz-transition: -moz-transform 0.6s; 
 
    -o-transition:  -o-transform 0.6s; 
 
    transition:   transform 0.6s; 
 
} 
 
.dropdown .icon-arrow:before { content: '\25BC'; } 
 
.dropdown .dropdown-menu { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.dropdown .dropdown-menu li { padding: 0; } 
 
.dropdown .dropdown-menu li a { 
 
    display: block; 
 
    color: #6f6f6f; 
 
    background: #EEE; 
 
    -webkit-box-shadow: 0 1px 0 white inset, 
 
    0 -1px 0 #d5d5d5 inset; 
 
    -moz-box-shadow: 0 1px 0 white inset, 
 
    0 -1px 0 #d5d5d5 inset; 
 
    box-shadow:   0 1px 0 white inset, 
 
    0 -1px 0 #d5d5d5 inset; 
 
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3); 
 
    padding: 10px 10px; 
 
} 
 
.dropdown .dropdown-menu li a:hover { 
 
    background: #f6f6f6; 
 
} 
 
.dropdown .show, 
 
.dropdown .hide { 
 
    -webkit-transform-origin: 50% 0; 
 
    -moz-transform-origin: 50% 0; 
 
    -ms-transform-origin: 50% 0; 
 
    transform-origin: 50% 0; 
 
} 
 
.dropdown .show { 
 
    display: block; 
 
    max-height: 9999px; 
 
    -webkit-transform: scaleY(1); 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform:  scaleY(1); 
 
    transform:   scaleY(1); 
 
    -webkit-animation: showAnimation 0.5s ease-in-out; 
 
    -moz-animation: showAnimation 0.5s ease-in-out; 
 
    animation:   showAnimation 0.5s ease-in-out; 
 
    -webkit-transition: max-height 1s ease-in-out; 
 
    -moz-transition: max-height 1s ease-in-out; 
 
    -o-transition:  max-height 1s ease-in-out; 
 
    transition:   max-height 1s ease-in-out; 
 
} 
 
.dropdown .hide { 
 
    max-height: 0; 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    animation: hideAnimation 0.4s ease-out; 
 
    -moz-animation: hideAnimation 0.4s ease-out; 
 
    -webkit-animation: hideAnimation 0.4s ease-out; 
 
    -moz-transition: max-height 0.6s ease-out; 
 
    -o-transition: max-height 0.6s ease-out; 
 
    -webkit-transition: max-height 0.6s ease-out; 
 
    transition: max-height 0.6s ease-out; 
 
} 
 

 
@keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@-moz-keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@-webkit-keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
} 
 
@-moz-keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
} 
 
@-webkit-keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
}

<div class="container"> 
 
    <input type='text' id='input-field1' value='' /> 
 
    <ul> 
 
    <li class="dropdown"> 
 
     <a href="#" data-toggle="dropdown"> 
 
     Select Item <i class="icon-arrow"></i> 
 
     </a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#" data-optValue="Option 1">option One</a></li> 
 
     <li><a href="#" data-optValue="Option 2">option Two</a></li> 
 
     <li><a href="#" data-optValue="Option 3">option Three</a></li> 
 
     <li><a href="#" data-optValue="Option 4">option Four</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="container"> 
 
    <input type='text' id='input-field2' value='' /> 
 
    <ul> 
 
    <li class="dropdown"> 
 
     <a href="#" data-toggle="dropdown"> 
 
     Select Item <i class="icon-arrow"></i> 
 
     </a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#" data-optValue="Option 1">option One</a></li> 
 
     <li><a href="#" data-optValue="Option 2">option Two</a></li> 
 
     <li><a href="#" data-optValue="Option 3">option Three</a></li> 
 
     <li><a href="#" data-optValue="Option 4">option Four</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

私はliとして選択ボックスを使用して選択ボックスを作成しようとしていますが、それはすべてのブラウザでうまく動作しません。オプションを選択して、オプション値を入力ボックスに保存し、CSSを使って非表示にすることができます。しかし問題は、ドロップダウンリストからオプションを選択してその値を入力ボックスに保存する方法と、「アイテム選択」テキストをオプションテキストに置き換える必要があることです。また、複数の分野で作業する必要があります。

出典

2016-11-28 Anirban

の可能性のある重複[リーバニラJavascriptを使用するなどの選択項目（http://stackoverflow.com/questions/40829055/li-as -select-item-using-vanilla-javascript） – CBroe

それは完全に重複していません。私の問題はまだ解決されていません。別の問題が起こった。 – Anirban

他の質問の詳細をたくさん説明した広範な回答があります。私たちは、あなたが何かをしていることを示すことを期待しています。それはあなたが望むものを正確にはしません、それはここで2,3回微調整が必要かもしれません？そうすれば、時間のかかるあなたから得られた新しい知識を使って、そのような長い答えを書くことができます。あなたがそれをする意思がない、あるいはできないなら、あなたは間違った場所にいます。 StackOverflowはあなたが必要とするものだけを "注文"するサービスではありません。 – CBroe

アンカー要素のクリックにイベントリスナーを追加するだけで、ハンドラでは、関連する入力要素の値を変更する必要があります。これを行うには、data-associated-inputのような別の属性を追加することをお勧めします。この属性は、特定の入力オプションで変更する必要がある入力要素をイベントハンドラのコードに正確に伝えることができます。以下は、実装これらのアイデアの一例である：

var dropdown = document.querySelectorAll('.dropdown'); 
 
var dropdownArray = Array.prototype.slice.call(dropdown,0); 
 
dropdownArray.forEach(function(el){ 
 
\t var button = el.querySelector('a[data-toggle="dropdown"]'), 
 
\t \t \t menu = el.querySelector('.dropdown-menu'), 
 
\t \t \t arrow = button.querySelector('i.icon-arrow'); 
 

 
\t button.onclick = function(event) { 
 
\t \t if(!menu.hasClass('show')) { 
 
\t \t \t menu.classList.add('show'); 
 
\t \t \t menu.classList.remove('hide'); 
 
\t \t \t arrow.classList.add('open'); 
 
\t \t \t arrow.classList.remove('close'); 
 
\t \t \t event.preventDefault(); 
 
\t \t } 
 
\t \t else { 
 
\t \t \t menu.classList.remove('show'); 
 
\t \t \t menu.classList.add('hide'); 
 
\t \t \t arrow.classList.remove('open'); 
 
\t \t \t arrow.classList.add('close'); 
 
\t \t \t event.preventDefault(); 
 
\t \t } 
 
\t }; 
 
}) 
 

 
Element.prototype.hasClass = function(className) { 
 
    return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className); 
 
}; 
 

 

 
function setupListeners(){ 
 
/* get all dropdown options */ 
 
var ulMenus = document.getElementsByClassName("dropdown-menu"); 
 
for(var i=0;i<ulMenus.length;i++){ 
 
\t var opts = ulMenus[i].getElementsByTagName('a'); 
 
\t for(var x=0; x<opts.length;x++){ 
 
\t \t /* add listener */ 
 
\t \t opts[x].setAttribute("onclick", "updateHidden(this);return !1;"); 
 
\t \t opts[x].setAttribute("onClick", "updateHidden(this);return !1;"); /* Support old browser that don't recognize all lowercase html */ 
 
\t } 
 
} 
 

 
} 
 

 
function updateHidden(ele){ 
 

 
    if(!ele) 
 
\t return false; 
 

 
    var eleHidden = document.getElementById(ele.getAttribute("data-associated-input")); 
 
    if(eleHidden){ 
 
\t  eleHidden.value = ele.getAttribute("data-optvalue"); 
 
    } 
 

 
} 
 

 
setupListeners();

.text-center { 
 
    text-align: center; 
 
} 
 

 
*, 
 
*:before, 
 
*:after { 
 
    -webkit-border-sizing: border-box; 
 
    -moz-border-sizing: border-box; 
 
    border-sizing: border-box; 
 
} 
 

 
.container { 
 
    width: 350px; 
 
    margin: 50px auto; 
 
    float:left; 
 
    margin-right:30px; 
 
} 
 
.container > ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0 0 20px 0; 
 
} 
 

 
.title { 
 
    font: normal 40px/1.4 'Pacifico', sans-serif; 
 
    text-align: center; 
 
    color: #2980B9; 
 
} 
 

 
.dropdown a { text-decoration: none; } 
 
.dropdown [data-toggle="dropdown"] { 
 
    position: relative; 
 
    display: block; 
 
    color: white; 
 
    background: #2980B9; 
 
    -webkit-box-shadow: 0 1px 0 #409ad5 inset, 
 
         0 -1px 0 #20638f inset; 
 
    -moz-box-shadow: 0 1px 0 #409ad5 inset, 
 
         0 -1px 0 #20638f inset; 
 
    box-shadow:   0 1px 0 #409ad5 inset, 
 
         0 -1px 0 #20638f inset; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); 
 
    padding: 10px; 
 
} 
 
.dropdown [data-toggle="dropdown"]:hover { background: #2c89c6; } 
 
.dropdown .icon-arrow { 
 
    position: absolute; 
 
    display: block; 
 
    font-size: 0.7em; 
 
    color: #fff; 
 
    top: 14px; 
 
    right: 10px; 
 
} 
 
.dropdown .icon-arrow.open { 
 
    -webkit-transform: rotate(-180deg); 
 
    -moz-transform: rotate(-180deg); 
 
    -ms-transform:  rotate(-180deg); 
 
    transform:   rotate(-180deg); 
 
    -webkit-transition: -webkit-transform 0.6s; 
 
    -moz-transition: -moz-transform 0.6s; 
 
    -o-transition:  -o-transform 0.6s; 
 
    transition:   transform 0.6s; 
 
} 
 
.dropdown .icon-arrow.close { 
 
    -webkit-transform: rotate(0); 
 
    -moz-transform: rotate(0); 
 
    -ms-transform:  rotate(0); 
 
    transform:   rotate(0); 
 
    -webkit-transition: -webkit-transform 0.6s; 
 
    -moz-transition: -moz-transform 0.6s; 
 
    -o-transition:  -o-transform 0.6s; 
 
    transition:   transform 0.6s; 
 
} 
 
.dropdown .icon-arrow:before { content: '\25BC'; } 
 
.dropdown .dropdown-menu { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.dropdown .dropdown-menu li { padding: 0; } 
 
.dropdown .dropdown-menu li a { 
 
    display: block; 
 
    color: #6f6f6f; 
 
    background: #EEE; 
 
    -webkit-box-shadow: 0 1px 0 white inset, 
 
         0 -1px 0 #d5d5d5 inset; 
 
    -moz-box-shadow: 0 1px 0 white inset, 
 
         0 -1px 0 #d5d5d5 inset; 
 
    box-shadow:   0 1px 0 white inset, 
 
         0 -1px 0 #d5d5d5 inset; 
 
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3); 
 
    padding: 10px 10px; 
 
} 
 
.dropdown .dropdown-menu li a:hover { 
 
    background: #f6f6f6; 
 
} 
 
.dropdown .show, 
 
.dropdown .hide { 
 
    -webkit-transform-origin: 50% 0; 
 
    -moz-transform-origin: 50% 0; 
 
    -ms-transform-origin: 50% 0; 
 
    transform-origin: 50% 0; 
 
} 
 
.dropdown .show { 
 
    display: block; 
 
    max-height: 9999px; 
 
    -webkit-transform: scaleY(1); 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform:  scaleY(1); 
 
    transform:   scaleY(1); 
 
    -webkit-animation: showAnimation 0.5s ease-in-out; 
 
    -moz-animation: showAnimation 0.5s ease-in-out; 
 
    animation:   showAnimation 0.5s ease-in-out; 
 
    -webkit-transition: max-height 1s ease-in-out; 
 
    -moz-transition: max-height 1s ease-in-out; 
 
    -o-transition:  max-height 1s ease-in-out; 
 
    transition:   max-height 1s ease-in-out; 
 
} 
 
.dropdown .hide { 
 
    max-height: 0; 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    animation: hideAnimation 0.4s ease-out; 
 
    -moz-animation: hideAnimation 0.4s ease-out; 
 
    -webkit-animation: hideAnimation 0.4s ease-out; 
 
    -moz-transition: max-height 0.6s ease-out; 
 
    -o-transition: max-height 0.6s ease-out; 
 
    -webkit-transition: max-height 0.6s ease-out; 
 
    transition: max-height 0.6s ease-out; 
 
} 
 

 
@keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@-moz-keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@-webkit-keyframes showAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(0.1); 
 
    -ms-transform: scaleY(0.1); 
 
    -webkit-transform: scaleY(0.1); 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.04); 
 
    -ms-transform: scaleY(1.04); 
 
    -webkit-transform: scaleY(1.04); 
 
    transform: scaleY(1.04); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
} 
 
@-moz-keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
} 
 
@-webkit-keyframes hideAnimation { 
 
    0% { 
 
    -moz-transform: scaleY(1); 
 
    -ms-transform: scaleY(1); 
 
    -webkit-transform: scaleY(1); 
 
    transform: scaleY(1); 
 
    } 
 
    60% { 
 
    -moz-transform: scaleY(0.98); 
 
    -ms-transform: scaleY(0.98); 
 
    -webkit-transform: scaleY(0.98); 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -moz-transform: scaleY(1.02); 
 
    -ms-transform: scaleY(1.02); 
 
    -webkit-transform: scaleY(1.02); 
 
    transform: scaleY(1.02); 
 
    } 
 
    100% { 
 
    -moz-transform: scaleY(0); 
 
    -ms-transform: scaleY(0); 
 
    -webkit-transform: scaleY(0); 
 
    transform: scaleY(0); 
 
    } 
 
}

<div class="container"> 
 
    <input type='text' id='input-field2' value='' /> 
 
    <ul> 
 
    <li class="dropdown"> 
 
     <a href="#" data-toggle="dropdown">Select Item <i class="icon-arrow"></i></a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#" data-optValue="Option 1" data-associated-input="input-field2">option One</a></li> 
 
     <li><a href="#" data-optValue="Option 2" data-associated-input="input-field2">option Two</a></li> 
 
     <li><a href="#" data-optValue="Option 3" data-associated-input="input-field2">option Three</a></li> 
 
     <li><a href="#" data-optValue="Option 4" data-associated-input="input-field2">option Four</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

出典

2016-11-28 19:41:37 SpencerD

返事のためにスペンサー・ドークに感謝しますが、他の方法でやってしまいました。複数のフィールドと競合します。 – Anirban

バニラJavascriptのカスタム選択ボックス

答えて

関連する問題