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