入力フィールド内にドロップダウン矢印を追加する

<label> Enter your favorite movies:<br/> 
    <input type="text" name="movies" list="movies"/> 
    <datalist id="movies"> 

    <label> or select one from the list: 
    <select name="movies"> 
    <option value="Star Wars"> 
    <option value="The Godfather"> 
    <option value="Goodfellas"> 
    </select> 
    </label> 

    </datalist> 
</label>

私はこのことがありますが、唯一の問題は、ドロップダウンリストをクリックしたときにドロップダウンリストを示す入力フィールドとマージされたドロップダウンボタンが必要なことです。上記のhtmlは私がやりたいことには完璧ですが、ボタンがないだけです。 JavaScriptなしで何かできるの？あなたはこれをチェックしselectとlabel入力フィールド内にドロップダウン矢印を追加する

<label> Enter your favorite movies: </label><br/> 
    <input type="text" name="movies" list="movies"/> 
    <datalist id="movies"> 
    <option value="Star Wars"> 
    <option value="The Godfather"> 
    <option value="Goodfellas"> 
    </datalist>

出典

2016-06-29 dms

？ドロップダウン内で検索しますか？ –

私はすでにdatalistでそれを持っていますが、ドロップダウンボタンもありますので、入力フィールドをダブルクリックすることなくリストを見ることができます。 htmlは私のためにうまく動作します。 – dms

これは役に立ちますか？ http://stackoverflow.com/questions/35196782/how-to-make-datalist-arrow-to-be-always-visible –

を削除するように

<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Dropdowns</h2> 
 
    <p>The .dropdown class is used to indicate a dropdown menu.</p> 
 
    <p>Use the .dropdown-menu class to actually build the dropdown menu.</p> 
 
    <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>           
 
    <div class="dropdown"> 
 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example 
 
    <span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">HTML</a></li> 
 
     <li><a href="#">CSS</a></li> 
 
     <li><a href="#">JavaScript</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

出典

2016-06-29 14:37:48

htmlのドロップダウンボタンのように見せる方法はありますか？ – dms

コンテンツを使用することができます： "\ 25bc";正確ではありませんが、何か何が似ています – VishwaKumar

@VishwaKumarの提案で更新されました。 –

、これは擬似要素を追加します要素の内容をよりよく見えるように入力タグのdiv font-awesome下向き矢印のフォント。

<div class="dropdown"> 
    <input type="text"> 
</div>

とCSSを置く：

.dropdown{ 
     position: relative; 
     display: inline-block; 
    } 
    .dropdown::before{ 
     position: absolute; 
     content: " \2193"; 
     top: 0px; 
     right: -8px; 
     height: 20px; 
     width: 20px; 
    }

チェックフィドル：Check Fiddle

出典

2016-06-29 14:13:36 eyalix

として代わりにブートストラップでをドロップダウンを使用しようとすることができ

出典

2016-06-29 14:33:40 boomcode

は、これは私が思い付いた迅速なコードです。これを拡張してクリック機能をバインドし、データリストのドロップダウンを表示することができます。 Chrome、IE、Firefoxでうまく見えます（最新のもののみ）。あなたが達成したい何

<label> Enter your favorite movies:<br /> 
     <div class="datalist-wrap"> 
      <div class="input-wrap"> 
       <input id="movietxt" type="text" name="movies" list="movies" /> 
       <button id="caret">&#9660;</button> 
      </div> 
      <datalist id="movies"> 

       <label> or select one from the list: <select name="movies" 
        id="select"> 
         <option value="Star Wars"> 
         <option value="The Godfather"> 
         <option value="Goodfellas"> 
       </select> 
       </label> 

      </datalist> 
     </div> 
    </label> 

    button#caret { 
     border : none; 
     background : none; 
     position: absolute; 
     top: 0px; 
     right: 0px; 
    } 

    .input-wrap { 
     position: relative; 
     display: inline; 
    } 

    input::-webkit-calendar-picker-indicator { 
     display: none; 
    }

jsfiddle

出典

2016-06-29 15:05:33 VishwaKumar

入力フィールド内にドロップダウン矢印を追加する

答えて

関連する問題