add caret to select dropdown menu
<p><a href="http://i.stack.imgur.com/eHAoo.png" rel="nofollow">here is the image</a>   I want to add a bootstrap <strong>caret</strong> class in my select dropdown menu.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.select_menu{
  font-size: 12px;
  outline: none;
  border: thin #ddd solid;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #F7F7F7;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select class="form-control select_menu" style=""&gt;
    &lt;option&gt;Click here to select purpose&lt;/option&gt;
    &lt;option&gt;Option 1&lt;/option&gt;
    &lt;option&gt;Options 2 &lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>

<p>I have used bootstrap form-control. How can I add caret to select dropdown menu.</p>