2

I have a Input.TextArea that get user input message, the html look like this:

<div className="input-box">
    <Input.TextArea
        id="talkInput"
        rows={1}
        value={inputValue}
        ref={inputRef}
        onChange={handleChatInputChange}
        onKeyPress={handleEnterKey}
        placeholder="input some message，press Enter to send" />
    <Button icon={<SendOutlined style={{ 
        display: 'flex', 
        alignItems: 'center', 
        transform: 'rotate(-45deg)',
        justifyContent: 'center' }}/>}
        loading={loadings}
        onClick={handleSend}
    ></Button>
</div>

when I input some content, the Input.TextArea will show light blue border. is it possible to make it not show the border? I have tried like this:

textarea:focus {
  outline: none;
  border: none;
}

and also set the border color like this:

textarea:focus {
  outline: none;
  border: none;
  border: 0px solid white;
}

none of them works. what should I do to make the Input.TextArea not show the light blue border?

InSync
  • 4,851
  • 4
  • 8
  • 30
spark
  • 663
  • 1
  • 5
  • 18
  • Does `Input.TextArea` actually render a `textarea` in the HTML? (What you have looks like JSX to me, but some appropriate tags on the question would be helpful) – DBS Apr 28 '23 at 17:39
  • Input.TextArea is antd component, I have replace this component with textarea – spark Apr 28 '23 at 17:59

1 Answers1

0

Use:

textarea {
  outline: none;
}
Oriol Giner
  • 1