Как исправить ширину ввода Form.control, которая изменяется при изменении типа ввода с «текст» на «тип»?

Question

При загрузке страницы ввод имеет type = "text", так как я хочу отобразить заполнитель текста.Я добавил функциональность для ввода, которая в фокусе, тип ввода должен быть type = "time".

Однако, при изменении на type =" time" ширина ввода также изменяется.Я хочу оставить ширину такой же, как была на input = "text".

Вот мой код:

this.state = {type: 'text'}; 

onFocus() {this.setState({ type: 'time' });}
onBlur() {this.setState({type: 'text'});

<Form.Group>
       <Form.Label >From</Form.Label>
       <Form.Control type={this.state.type} onFocus={this.onFocus} onBlur={this.onBlur} placeholder="Shop opens" />
</Form.Group>

Answer 1

Добавьте ниже правило css в свой файл scss или css, которое будет контролировать ширину ввода в любой момент времени:

custom-input-width {
  width : 250px !important; // you can set as per your requirement
}

Примените это правило css к вашему входув реакции:

<input className="custom-input-width" />