0

I created one dropdown list using bootstrap css

I want to change the color of label when item in dropdown menu selected. But here i dont know why the dropdown items are not visible

CODEPEN DEMO

<label> Test color </label>
<div class="col-lg-6">
            <div class="input-group">
              <input type="text" class="form-control">
              <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button>
            <ul class="dropdown-menu pull-right">
              <li><a href="#">yellow</a></li>
              <li><a href="#">green</a></li>
              <li><a href="#">black</a></li>
              <li class="divider"></li>
              <li><a href="#">red</a></li>
            </ul>
              </div><!-- /btn-group -->
            </div><!-- /input-group -->
          </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->

How can I change the color of label when color is selected from the menu?

UPDATED CODE:

<html lang="en">
    <head>
        <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">


        <!-- Custom styles for this template -->
        <link href="sticky-footer-navbar.css" rel="stylesheet">
     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    </head>
<body>
<label>Test color</label>
<div class="col-lg-6">
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn btn-default">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span>

            </button>
            <ul class="dropdown-menu pull-right">
                <li><a href="#">yellow</a>

                </li>
                <li><a href="#">green</a>

                </li>
                <li><a href="#">black</a>

                </li>
                <li class="divider"></li>
                <li><a href="#">red</a>

                </li>
            </ul>
        </div>
        <!-- /btn-group -->
    </div>
    <!-- /input-group -->
</div>
</body>
</html>
user3121782
  • 159
  • 2
  • 11

1 Answers1

2

It looks like something is wrong with the way you've included Bootstrap 3 on your codepen.

The dropdown shows fine on Bootply using Bootstrap 3.0.3: http://bootply.com/103458

You can change the label text color with something like this:

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $('label').css('color',selText);
});
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • thanks a lot. I am not familiar with bootply. can you please tell me which external file you have used here and where it show in bootply demo? – user3121782 Jan 02 '14 at 13:48
  • As you can see if you view source on the preview frame in Bootply.. it's using the 3.0.3 version hosted on BootstrapCDN: http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css – Carol Skelly Jan 02 '14 at 13:58
  • thanks, please see my updated code which i tested on my localhost. but it does not popup. any issue with it? – user3121782 Jan 02 '14 at 14:12
  • Yes.. you need to include `bootstrap.min.js` also – Carol Skelly Jan 02 '14 at 14:27