`select.is-skeleton` is inconsistent with other skeletons

[non-bin]

Adding the is-skeleton class to a select element produces a result that doesn't align with the rest of the skeleton visual style

<form class="box">
  <div class="select is-skeleton">
    <select>
      <option>Select dropdown</option>
      <option>With options</option>
    </select>
  </div>
</form>

Adding the is-skeleton class directly to the select element at least hides the text

<form class="box">
  <div class="select">
    <select class="is-skeleton">
      <option>Select dropdown</option>
      <option>With options</option>
    </select>
  </div>
</form>

Setting the select element to display: none; helps, but the arrow still displays, and you have to give it a manual width

<form class="box" style="width: 225px">
  <div class="field">
    <div class="control is-expanded">
      <div class="select is-fullwidth is-skeleton">
        <select style="display: none">
          <option>Select dropdown</option>
          <option>With options</option>
        </select>
      </div>
    </div>
  </div>
</form>

EDIT: Setting the select element to disabled also shows through the skeleton, which looks weird

Am I missing something? Or is this intended behaviour?

In a similar vein, I would expect wrapping elements in a div.skeleton-block would wide them or apply their skeleton styles, but it leaves the content visible