Пользовательский интерфейс материала: удаление стрелок вверх / вниз из TextView

Question

У меня есть этот TextView в пользовательском интерфейсе материала:

<TextField
      id="contact phone number"
      label="Contact phone number"
      type="number"
      value={this.state.contactPhoneNumber}
      onChange={this.handleChange('contactPhoneNumber')}
      placeholder="Contact phone number"
      margin="normal"
/>

Это выглядит так:

Как бы я убрал стрелки вверх и внизиз TextView?

Answer 1

Вы можете попробовать подход css для этого.

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

Answer 2

Из документов TextField реквизит type принимает допустимые типы ввода HTML.Я полагаю, что причина присутствия стрелок вверх и вниз заключается в том, что вы указали number в качестве типа.

Вместо этого попробуйте type="tel", так как он кажется стандартным типом ввода для телефонных номеров.

Вот ссылка на тип телефона и почему это хорошоИдея использовать это.Обратите внимание, что если текущий браузер не поддерживает его, он снова станет обычным текстовым полем.