css - 如何修复当输入类型从 "text"更改为 "type"时更改的 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

Add below css rule in your scss or css file which will control your input width at any point of time :

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

Apply this css rule on your input in react :

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