CODEWITHSUNDEEP
cssreactjstailwind-css
Eran
Eran

Reputation: 1702

Tailwind css don't show hover state when input is in focus

On the following div:

<div className='border border-gray-400 
                text-gray-600 
                hover:border-gray-600 
                focus:border-green-500 
                focus-within:border-green-500'>

I want the hover state not to happen when an element is an in-focus state. How can I make it so?

Thanks!

Upvotes: 2

Views: 5041

Answers (5)

Anastasiia Solop
Anastasiia Solop

Reputation: 1493

I had a similar issue with conflicting :hover and :focus-within, so my solution was to use :hover:focus-within like this hover:border-gray-600 focus-within:border-green-500 hover:focus-within:border-green-500

Upvotes: 3

Atirson Fabiano
Atirson Fabiano

Reputation: 1

Try use property "ring"

<div className='border border-gray-400 
                text-gray-600 
                ring-green-500 
                focus-within:ring-2'>

Upvotes: 0

Abin Thaha
Abin Thaha

Reputation: 4633

Use the css :not selector, e.g. hover(:not focus):border-gray-600

Upvotes: 0

Eran
Eran

Reputation: 1702

export const FramelessInput = ({ name }) => {
const [focused, setFocused] = useState(false);
return (
    <div
        className={classNames(
            'w-[200px] rounded-sm border border-transparent text-gray-600  focus-within:border-green-500',
            !focused && 'hover:border-gray-600'
        )}
    >
        <input
            type="text"
            placeholder={name}
            onFocus={(e) => setFocused(true)}
            onBlur={(e) => setFocused(false)}
            className="block text-sm leading-4 font-sans p-3 h-10 focus:outline-none"
        />
    </div>
);

};

Upvotes: 0

JsWizard
JsWizard

Reputation: 1749

Try this, border need to define width, so in this example I gave just 2 when it hovered. check official Doc

<div className='hover:border-2 border-gray-400 text-gray-600 
                    hover:border-gray-600 
                    focus:border-green-500 focus-within:border-green-500'>

Upvotes: 0

Related Questions