Add tick icon when select multiple select option in CSS

Anybody want to add tick icon on the background of the selected option in HTML with CSS. And also want to change color as required.

Example:

CSS:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

      <style>

    .anythinglearn select {width:300px; position:relative;}

  .anythinglearn select[multiple]:focus option:checked {

      background: linear-gradient(0deg, green 0%, green 100%);

    }

    .anythinglearn select[multiple]:focus option:checked::after{font-family:'FontAwesome'; content:'\f00c'; position:absolute; right:0; color:#fff; }

</style>

HTML:

<div class="anythinglearn">

  <select multiple>

    <option value="banana">Banana</option>

    <option value="mango">Mango</option>

    <option value="plum">Plum</option>

    <option value="grapes">Grapes</option>

  </select>

</div>