title: How do you add an add image as drop down arrow?
body: <p>I created a application with a drop down arrow, but the size of the arrow is too small.</p>
  
  <p>So  I decided to enlarge the size of the arrow. I need to add an image instead of arrow.</p>
  
  <p>Is it possible to add image or resize the arrow?</p>
  
  <p>My current CSS is below.</p>
  
  <pre><code>.custom-select:after {
          content: "â–¼";
          content-size:20;
          position: absolute;
          top: -83%;
          right: 6%;
          bottom: 0;
          font-size: 60%;
          line-height:30px;
          line-width:100px;
          padding: 0 10px;
          background:#03498A;
          color: white;
  
          height:40px;
          pointer-events:none;
  
          -webkit-border-radius: 0 6px 6px 0;
          -moz-border-radius: 0 6px 6px 0;
          border-radius: 0 6px 6px 0;
      }
  &lt;label class="custom-select" style="width:40%" onClick="birthday()"&gt;
  
     &lt;select name="mydropdown" id="gender" placeholder="Gender"&gt;
  
     &lt;option value=""&gt;Gender&lt;/option&gt;
  
  &lt;option  value="Male"&gt;Male&lt;/option&gt;
  
  &lt;option  value="Female"&gt;Female&lt;/option&gt;
  &lt;/select&gt;
  &lt;/label&gt;
  </code></pre>