JSFiddle - React, Tailwind, and code Playground

by pmamode

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js"></script>
<p>
    Name: 
    
    <select data-bind="visible: editing(), value: name, hasFocus: editing">
          <option>(Undefined)</option>
          <option>NOT Safety Related</option>
          <option>Safety Related</option>
    </select>
    <b data-bind="visible: !editing(), text: name, click: edit"></b>.
</p>

CSS

select {
  background-color: grey;
  color: white;
  border: 0 !important;
  /*Removes border*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-overflow: '';
  text-indent: 0.0px;
  /* Removes default arrow from firefox*/
  text-overflow: "";
  /*Removes default arrow from firefox*/
}

select::-ms-expand {
  display: none;
}

.select-wrapper {
  padding: 0px;
  overflow: hidden;
}

JavaScript

$(document).ready(function() {

 function PersonViewModel() {
    // Data
    this.name = ko.observable(name);
    this.editing = ko.observable(false);
         
    // Behaviors
    this.edit = function() { this.editing(true); }
}
 
ko.applyBindings(new PersonViewModel());

});