CODEWITHSUNDEEP
cssstyled-components
Fiddle Freak
Fiddle Freak

Reputation: 2041

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

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

Upvotes: 1

Views: 794

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19119

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

Upvotes: 1

Related Questions