HTMLの選択タグのオプションにHTMLの水平線を追加する方法

bugfix> html > 投稿

下の画像に示すように、html selectオプションタグにhtmlの水平線を表示したい。線の色は、オプションタグごとに異なる必要があります。 私はうまくいかなかった以下のコードで試しました：

<html>
    <head>
    </head>
    <body>
    <form name="AddAndEdit">
      <div>
      </div id="div1">
      <div>
       <select name="list" id="personlist">
          <option value="11">Person1<hr width="30" style='color:red'></option>
          <option value="27">Person2<hr width="30" style='color:red'></option>
          <option value="17">Person3<hr width="30" style='color:green'></option>     
       </select>
      </div>
      <input type="button" value="submit""/>
    </form>
    </body>
    </html>

この問題を解決するための提案を歓迎します。 前もって感謝します

html

drop-down-menu

回答 2 件

  • select2ライブラリを使用できる場合。以下のリンクをたどり、テンプレートの下のセクションの例に従ってください。 http://select2.github.io/select2/

  • デフォルトの選択ドロップダウンではこれに関するヘルプは提供されませんが、この目的のためにtwitter bootstrap dopdownsを使用できます

    ここでこのw3linkを確認してください https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp

    提案する

    <!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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 class='divider'></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>
</body>
</html>

あなたの答え

関連記事