CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Saran
Saran

Reputation: 388

Is this possible to change dropdown arrow up and down in bootstrap

How to change bootstrap dropdown arrow up and down while clicking the dropdown menu. Is this possible using css?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<li class="dropdown">
  <a href="#" style="text-decoration:none" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Menu2</a></li>
        <li><a href="#">Menu3</a></li>
      </ul>
</li>

Upvotes: 5

Views: 13197

Answers (2)

Manish Salunke
Manish Salunke

Reputation: 61

Add below code bottom of you css style. and let me know if its works or not.

.dropdown.open .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-bottom: 4px dashed;
    border-top: 0px solid transparent;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

Example on CodePen

Upvotes: 6

Paran0a
Paran0a

Reputation: 3457

Add this CSS:

li.open > a > span{
   border-top: 0px !important;
   border-bottom: 4px dashed !important;
}

It will select your span ( which is basically your arrow pointing up or down ) when the list is opened ie. when it contains class .open . Then it will change the spans css definition and turn the arrow.

Output:

li.open > a > span {
  border-top: 0px !important;
  border-bottom: 4px dashed !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<li class="dropdown">
  <a href="#" style="text-decoration: none" class="dropdown-toggle" data-toggle="dropdown">Dropdown
   
      <span class="caret"></span>
     </a>
  <ul class="dropdown-menu">
    <li><a href="#">Menu1</a>
    </li>
    <li><a href="#">Menu2</a>
    </li>
    <li><a href="#">Menu3</a>
    </li>
  </ul>
</li>

Upvotes: 4

Related Questions