代码之家 › 专栏 › 技术社区 › Fiddle Freak

输入[type=“search”]:-webkit-search-d生态:悬停{cursor:pointer;}在样式化组件中

styled-components css

Fiddle Freak · 技术社区 · 4 年前

input[type="search"]::-webkit-search-decoration:hover {cursor: pointer;} 在样式化组件中?。。。

下面的代码无法工作或无法识别。

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

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

display pointer on hover close icon in search textbox

1 回复 | 直到 4 年前

Andy Hoffman 4 年前

我通过在样式化组件中使用符号和字符来实现这一点,并添加了 type="search"

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