remove focus ring

[chriscoindeskindices]

How do I remove the focus ring? I tried to add styles to rti--container:focus { outline: none } and rti--input:focus { outline: none }, but it's not working

[JunaidKhan444]

@chriscoindeskindices Have you found the solution?

[akshaymemail]

I figured out the solution :

JSX :
`import React, { useEffect } from "react";
import { TagsInput } from "react-tag-input-component";
import "./styles.css";

const TagInput = (props) => {
useEffect(() => {
try {
const element = document.getElementsByClassName("rti--input")[0];
const tagElement = element.parentElement;
console.log(tagElement);
tagElement.setAttribute("id", "tag-input");
} catch (error) {
console.log("err", error);
}
}, []);
return (

<TagsInput
{...props}
classNames="tag-cls input-cls"
separators={["Enter", ","]}
/>
<em style={{ fontWeight: "lighter", fontSize: 10 }}>
press enter or comma to add new tag

);
};

export default TagInput;
`

CSS :

`.rti--input::placeholder {
color: #a6a1a1 !important;
font-feature-settings: "clig" off, "liga" off;
/* Desktop/Text Small /
font-family: Poppins;
font-size: 15px !important;
font-style: normal;
font-weight: 300 !important;
line-height: 24px; / 160% */
letter-spacing: 0.75px;
}

#tag-input {
border: 1px solid #ccc;
border-radius: 8px;
height: 57px;
box-shadow: none !important;
}`

It works for me

[henriqwe]

 .rti--container {
  --rti-border: #e6e6e6 !important;
  --rti-main: none !important;
}

.rti--container:focus-within {
  border: 1px solid #e6e6e6 !important;
} 

1° - Use the same border color in container and container:focus-within
2° - set none !important in rti-main