JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="col-md-2 form-group" style="width:150px">
    <select class="form-control" data-bind="value: userData.current_title, selectPlaceholder: 'Title'" title="">
        <option value="Title">Title</option>
        <option value="Mr.">THIS IS A REALLY LONG TEST OPTION</option>
        <option value="Miss">LONG LONG TEST OPTION</option>
        <option value="Mrs.">sdfasdfasdfasdfasdfasdfasdfasdf</option>
        <option value="Ms.">asdfasdfasdfasdfasdfasdfasdf.</option>
    </select>
    <p class="error" data-bind="validationError: userData.current_title" style="display: none;">Please select the Title</p>
</div>

CSS

select {
    padding:0 30px 0 10px !important;
}
body { padding: 30px; }

JavaScript

$('select.form-control').css({
    'width': '110%',
        'border': 'none',
        'border-radius': '0',
        'position': 'absolute',
        'left': '0',
        'background-color': 'transparent'
});
$('div.form-group').css({
    'overflow': 'hidden',
        'border': '1px solid #CCC',
        'border-radius': '4px',
        'position': 'relative',
        'height': '36px',
    'background':'url("//www.fotocommunity.com/gfx/menu/arrow_down_small.gif") no-repeat 90% 50%'
});
$('select').click(function () {
    $(this).parent('.form-group').css({
        'border-color': '#66afe9',
            'box-shadow': 'inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)',
            'outline': '0'
    });
});
$('select').blur(function () {
    $(this).parent('.form-group').css({
        'border-color': '#CCC',
            'box-shadow': '',
            'outline': '0 none'
    });
});