CODEWITHSUNDEEP
reactjs
dante
dante

Reputation: 1121

how to give focusing css effect in input tag

I'm using styled-components, react, typescript.

I have two input fields, and want them to have box-shadow effect only when each of them are focused.

My idea is give them a state focus and shows box-shadow when focus is true, but I have no idea how to implement this.

 const StyledInput = styled.input<{ focus: boolean}>`
  ${ p => p.focus ? `box-shadow: 0 0 24px rgb(244,231,123);` : ''}
 ` 
 const Form = () => {
   const [focus, setFocus ] = useState(false);
   // don't know how to use this state, 
   // may be focus state is not just boolean but object I guess ? 
   const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
     
   },[]) 
   return(
    <StyledInput 
      focus={focus}
    />
    <StyledInput 
      focus={focus}
    />
   )
 }

Upvotes: 0

Views: 38

Answers (1)

walter
walter

Reputation: 26

If what I understand is correct, you can implement it using CSS.

const StyledInput = styled.input`
  &:focus {
    box-shadow: 0 0 24px rgb(244,231,123);
  }
`

const Form = () => {
  return(<StyledInput />)
}

Upvotes: 1

Related Questions