Tried to remove the search cancel icon but isn't working?

[IAmMythoRED]

Hey I tried using the class name "search-cancel:appearence-none" to try remove the x while the user is typing but doesnt seems removing it:

Also my another problem is the text input width is not the width of the actual input field:

Hers my code:

import { Icon } from "@iconify/react"
import Image from "next/image"

const SearchForm = ({placeHolder}) => {
  return (
    <form className="flex w-[800px]">
        <input type="search" 
        size={80}
        className='search-cancel:appearance-none bg-gradient-to-r from-[#ffffffe5] to-[#e5e1cce7] text-[#0c0b0b] text-xl font-semibold opacity-[71%] shadow-[0px_3.5px_#00000060] px-[74px] py-1 ml-[63px] w-full h-[60px] rounded-[7px] mb-8 outline-none placeholder-[#131312] placeholder:font-bold placeholder:text-[20px]' 
        placeholder={placeHolder}/>

        <Icon className="absolute ml-[80px] mt-[12px]" icon='ic:outline-search' width={40} height={40} />
        <Image alt="google-search" src='/images/search-bot.png' width={255} height={261} className="absolute left-[756px] top-32 " />
    </form>
  )
}

export default SearchForm

[wongjn]

search-cancel: isn't a variant that is included in Tailwind core, so you'd need a Tailwind plugin to register this to some selector modifier.

You could consider using an arbitrary variant to hide the X icon, like [&::-webkit-search-cancel-button]:hidden – see this Tailwind Play.

[IAmMythoRED]

Also is there any way to customize the icon? is it like using [&::-webkit-search-cancel-button]:bg-[url] ?

Also do you have an answer to my question where the text field is not the exact width of the input elements?

[wongjn]

Also is there any way to customize the icon? is it like using [&::-webkit-search-cancel-button]:bg-[url] ?

You could try looking at this CodePen for an example of a customized icon.

Also do you have an answer to my question where the text field is not the exact width of the input elements?

No, I don't have an answer regarding that. I was not able to replicate the behavior in Chrome in the Tailwind Play.

[IAmMythoRED]

i was asking like when typing the txt stops here where i marked and rest of the entered text gets pushed. So i wanted it to be like have more width

[wongjn]

You could consider reducing the right padding: https://play.tailwindcss.com/hAyHpzkWYQ

[sonusinghh7]

thanks it's work