how to disable text in input type number when you enable speech

How can I prevent text from appearing in the number input field when speech recognition is enabled?
It's not working even though I used @media speech and disabled it in JS.

HTML

<form action="">
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <input type="submit">
</form>

CSS

@media speech {
[type="number"] {
    speak: digits;
    speak-as: spell-out;
  }
}
[type="number"]{
  width:200px;
  height:40px;
}

Javascript

document.querySelector('#quantity').webkitSpeech = false;