input[type="search"]::-webkit-search-decoration:hover {cursor: pointer;} in styled-components

Question

like the title says, how do I use input[type="search"]::-webkit-search-decoration:hover {cursor: pointer;} in a styled component?...

the code below isn't working or being recognized.

const SomeInput = styled.input`
    border-radius: 8px;

    input[type="search"]::-webkit-search-decoration:hover,
        input[type="search"]::-webkit-search-cancel-button:hover { 
            cursor:pointer; 
        }
`;

Trying to implement from here as a styled component: display pointer on hover close icon in search textbox

Answer 1

I got this working by using the ampersand character inside the styled component and added type="search" in the JSX.

import React from "react";
import "./styles.css";
import styled from "styled-components";

export default function App() {
  const SomeInput = styled.input`
    border-radius: 8px;

    &::-webkit-search-decoration:hover,
    &::-webkit-search-cancel-button:hover {
      cursor: pointer;
    }
  `;

  return (
    <div className="App">
      <SomeInput type="search" />
    </div>
  );
}

CodeSandbox