I've implemented an Input.TextArea element to capture user input messages, and the corresponding HTML structure is as follows:
<div className="input-box">
<Input.TextArea
id="talkInput"
rows={1}
value={inputValue}
ref={inputRef}
onChange={handleChatInputChange}
onKeyPress={handleEnterKey}
placeholder="Type a message and press Enter to send" />
<Button icon={<SendOutlined style={{
display: 'flex',
alignItems: 'center',
transform: 'rotate(-45deg)',
justifyContent: 'center' }}/>}
loading={loadings}
onClick={handleSend}
></Button>
</div>
Whenever I input text, the Input.TextArea displays a light blue border. Is there any way to remove this border? I've tried the following CSS styles:
textarea:focus {
outline: none;
border: none;
}
and also attempted to set the border color in this manner:
textarea:focus {
outline: none;
border: none;
border: 0px solid white;
}
Unfortunately, neither of these methods has worked for me. What steps should I take to prevent the Input.TextArea from displaying the light blue border?