dijit/form/ComboBox override fontawesome

by stafamus

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
<body class="claro">
    <select data-dojo-type="dijit/form/ComboBox">
        <option>Apples</option>
        <option selected>Oranges</option>
        <option>Pears</option>
    </select>
</body>

SCSS

.dijitComboBox {
         margin: 0px;
         vertical-align: top;
         height: 24px;
         .dijitDownArrowButton {
             background: #fff;
             border: 1px solid #bbb;
             color: #888;
             width: 24px;
             height: 24px;
             line-height: 24px;
             &:before {
                 font-family:'FontAwesome';
                 content: '\f0d7';
                 color: #444;
             }
             .dijitArrowButtonContainer {
                 background: #fff;
                 background-image: none;
                 border: 1px solid #bbb;
             }
             .dijitArrowButtonInner {
                 display: none;
             }
         }
         .dijitInputField.dijitInputContainer {
             border-bottom: 1px solid #bbb;
             padding: 3px 5px 3px 5px;
         }
     }

JavaScript

require([
    'dojo/parser',
    'dijit/form/ComboBox'], function (parser) {
    parser.parse();
});