Question

我有一种简单的方法将按钮隐藏在容器div中，以使其不可见。但是，我希望光标成为整个对象的十字准线，但是我不知道如何更改光标，因此在突出显示光标时它就是十字准线。如您所见，当悬停“选择文件”按钮时，光标将切换为其默认值。这是我的代码，以及指向沙盒的链接：https://codesandbox.io/s/zen-elgamal-mk059?file=/src/App.js

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

const MyButton = styled.div`
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  cursor: crosshair;
`;

const StyledForm = styled.form`
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: crosshair;
`;

const StyledInput = styled.input`
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: crosshair;
  background-color: pink;
`;

export default function App() {
  return (
    <div className="App">
      <MyButton>
        <StyledForm>
          <StyledInput type="file" />
        </StyledForm>
      </MyButton>
    </div>
  );
}

Answer 1

问题是您使用的是默认输入按钮。应替换为自定义。这是我的孤独。 https://codesandbox.io/s/vigilant-pond-tncxt?file=/src/App.js

设置“选择文件”按钮的样式

1 个答案: