title: Default value not selected in the select box
body: <p>I am trying to generate a select box from a PHP file as:</p>
  
  <pre><code>&lt;select class="form-control no-range-feature-val video-codec-list hidden"&gt;
      &lt;option value="none" selected="selected"&gt;Select&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The option with the value <code>none</code> should be selected by default, but it is not. Instead, I get a select box where I have to manually select the <code>Select</code> option.</p>
  
  <p><a href="https://i.stack.imgur.com/2geGC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2geGC.png" alt="enter image description here"></a></p>
  
  <p>What could be the reason for it? I have checked in Chrome, Firefox, Edge. They all report the same behavior.</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>.hidden {
      display: none !important;
  }
  
  add-feature-field-row .form-control {
      display: inline-block;
      width: 90px;
  }
  
  .form-control {
      display: block;
      width: 100%;
      height: 34px;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.42857143;
      color: #555;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
      border-radius: 4px;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
      -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
      transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
  }
  
  button, input, select, textarea {
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
  }
  
  button, input, optgroup, select, textarea {
      margin: 0;
      font: inherit;
      color: inherit;
  }
  </code></pre>