Is it possible to change the down arrow up and down in bootstrap

Question

How to change the bootstrap dropdown list up and down by clicking the dropdown menu. Is this possible with 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> 

Answer 1

Add this CSS:

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

It will display your range (which is basically an up or down arrow) when the list opens, i.e. when it contains the .open class. Then it will change the css scroll definition and rotate 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> 

Answer 2

Add below css code below code. and let me know if his work 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; } 

CodePen Example