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

Question

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>

Answer 1

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