Removing 'x' icon on the right side on 'input' field in React

Question

import { useState } from "react";

export default function SearchBar() {
  const [textFieldHovered, setTextFieldHovered] = useState(false);
  const [input, setInput] = useState(""); // This is your input state

  return (
    <>
      <form
        className="w-[300px] invisible sm:visible"
        onSubmit={(e) => e.preventDefault()}
      >
        <div className="relative">
          <div className="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
            <svg
              className="w-4 h-4 text-gray-500 dark:text-gray-400"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 20 20"
            >
              <path
                stroke="currentColor"
                strokeWidth="2"
                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
              />
            </svg>
          </div>
          <input
            type="search"
            id="default-search"
            className="block w-full p-4 ps-10 text-sm text-gray-900 border rounded-md bg-transparent hover:bg-gray-100 focus:bg-gray-100 focus:bg-opacity-70 dark:bg-transparent dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-800 dark:focus:bg-opacity-70"
            placeholder="Search..."
            value={input} // Set the input value to the state
            required
            onChange={(e) => setInput(e.target.value)} // Use onChange to update input state with input value
            onMouseEnter={() => setTextFieldHovered(true)} // Detect mouse enter
            onMouseLeave={() => setTextFieldHovered(false)} // Detect mouse leave
          />
          <button
            type="submit"
            className={`text-white absolute end-2.5 bottom-2.5 transition duration-200 ease-in-out font-medium rounded-lg text-sm px-4 py-2 
            ${
              textFieldHovered
                ? input.length === 0
                  ? "bg-orange-300 bg-opacity-70"
                  : "bg-orange-300"
                : "bg-blue-300 bg-opacity-30 hover:bg-opacity-70"
            } 
            focus:bg-opacity-70 focus:outline-none dark:text-white`}
          >
            Search
          </button>
        </div>
      </form>
    </>
  );
}

I have this search box.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  input[type="search"]::-webkit-inner-spin-button,
  input[type="search"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  html {
    @apply text-white;
  }
}

And, I have added the line below to global.css

  input[type="search"]::-webkit-inner-spin-button,
  input[type="search"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

But, it still appears when I type things. What have I done wrong here?

Answer 1

The clear button on the search box is styled by the user-agent and can be overriden by using the ::-webkit-search-cancel-button pseudoselector.

  input[type='search']::-webkit-inner-spin-button,
  input[type="search"]::-webkit-outer-spin-button,
  input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
    margin: 0;
  }