Cross browser datalist

Working solution for cross-browser implementation for the html5 datalist el that is inconsistent, at best.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- just for testing IGNORE -->
<div class="push"></div>
<!-- just for testing IGNORE -->
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <p>A better datalist implementation</p>
      <div class="well">
        <input class="data-list-txt form-control" type="text" value="http://www.google.com" />
        <select class="data-list form-control" id="list" onchange="setValue(this.value)">
                    <option style="display:none"></option>
                    <option value="http://www.google.com">http://www.google.com</option>
                    <option value="http://twitter.com">http://twitter.com</option>
                    <option value="http://ycombinator.com">http://ycombinator.com</option>
                    <option value="http://facebook.com">http://facebook.com</option>
                </select>
      </div>
    </div>
  </div>
</div>

CSS

.data-list-txt {
  min-width: 90%;
  max-width: 90%;
  display: inline;
  border-right: none;
  border-radius: 4px 0 0 4px;
  background-color: #fff;
}

.data-list-txt:focus {
  box-shadow: none;
}

.data-list {
  margin-top: -34px;
}

/* testing IGNORE*/

.push {
  margin-top: 40px;
}

JavaScript

var dl_input = document.querySelector('.data-list-txt');
var dl_select = document.querySelector('.data-list');

function makeDataList(state) {
  if (state) {
    dl_select.style.border = "1px solid rgb(102, 175, 233)";
  } else {
    dl_select.style.border = "1px solid #ccc";
  }
}

function setValue(value) {
  dl_input.value = value;
  dl_select.selectedIndex = 0;

}
dl_input.addEventListener('focus', function() {
  makeDataList(true)
});
dl_input.addEventListener('blur', function() {
  makeDataList(false)
});