DevExpress/Extreme dxSelectBox
<p>I have 2 problem's with devExpress dxSelectBox.</p>

<ol>
<li><p>After I pick an item form drop-down list input box becomes editable. It is not on page load and I don't know why.</p></li>
<li><p>Can't display a flag icon in main box, but can do it in dropdown list items
This is what it looks like this:</p></li>
</ol>

<p><a href="https://i.stack.imgur.com/pACyq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pACyq.png" alt="enter image description here"></a></p>

<p>Here is a code:
javascript:</p>

<pre><code>var langs = [{
    'Name': 'English',
    "ImageSrc": '/static/img/flags/United-States-icon.png',
    'value': 'en'
}, {
    'Name': '中文',
    "ImageSrc": '/static/img/flags/China-icon.png',
    'value': 'zh'
}]

$(function(){
    $("#language").dxSelectBox({
            dataSource: langs,
            displayExpr: "Name",
            valueExpr: "value",
            value: langs[0].value,
            acceptCustomValue: false,
            fieldEditEnabled: false,
            height: 'auto',
            width: '100',
            fieldTemplate: function(data, container) {
                var result = $("&lt;div class='custom-item'&gt;&lt;div class='lang'&gt;" +
                    "&lt;img src='" + data["ImageSrc"] +
                    "' /&gt;&lt;/div&gt;&lt;/div&gt;");
                result.find(".lang").dxTextBox({ value: data['Name'] });
                container.append(result);
            },
            itemTemplate: function(data) {
                return "&lt;div class='custom-item'&gt;" + "&lt;div class='lang'&gt;" +
                     data['Name'] + "&lt;img src='" +
                     data['ImageSrc']+ "' /&gt;&lt;/div&gt;&lt;/div&gt;";
            },
            valueChangeEvent: function(data) {
                window.location.replace('https://www.google.com')
            }
    });
});
</code></pre>

<p>css:</p>

<pre><code>.dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content {
    padding-left: 7px;
    padding-right: 7px;
}

.custom-item {
    position: relative;
    min-height: 30px;
}

.custom-item .language {
    display: inline-block;
    padding-left: 10px;
    text-indent: 0;
    line-height: 30px;
    font-size: 12px;
}

/*.custom-item &gt; img {*/
    /*left: 1px;*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*!*margin-top: -15px;*!*/
/*}*/

.custom-item .dx-texteditor-buttons-container {
    display: none;
}
.current-value {
    padding: 10px 0;
}

.current-value &gt; span {
    font-weight: bold;
}
</code></pre>