光标未出现在 scss 上的 <select> 元素中

Question

当光标移到选择元素上的流派标签上时。当我试图显示光标指针时，它没有显示一个，并且当用户单击我想要显示流派选项列表的流派时，它也没有显示任何流派选项。除了光标指针之外，选择元素中的其他样式都可以正常工作。

Featured.js

import { InfoOutlined, PlayArrow } from '@material-ui/icons';
import './featured.scss'
 
const Featured = ({type}) => {
  return <div className='featured'>
      {type && (
        <div className="category">
          <span>{type === "movie" ? "Movies" : "Series"}</span>
          <select name="genre" id="genre">
            <option>Genre</option>
            <option value="adventure">Adventure</option>
            <option value="comedy">Comedy</option>
            <option value="crime">Crime</option>
            <option value="fantasy">Fantasy</option>
            <option value="historical">Historical</option>
            <option value="horror">Horror</option>
            <option value="romance">Romance</option>
            <option value="sci-fi">Sci-fi</option>
            <option value="thriller">Thriller</option>
            <option value="western">Western</option>
            <option value="animation">Animation</option>
            <option value="drama">Drama</option>
            <option value="documentary">Documentary</option>
          </select>
        </div>
      )}
      <img  className='img'
            src="https://images.pexels.com/photos/6899260/pexels-photo-6899260.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"
            alt=""
          />
          <div className="info">
               <img
          src="https://occ-0-1432-1433.1.nflxso.net/dnm/api/v6/LmEnxtiAuzezXBjYXPuDgfZ4zZQ/AAAABUZdeG1DrMstq-YKHZ-dA-cx2uQN_YbCYx7RABDk0y7F8ZK6nzgCz4bp5qJVgMizPbVpIvXrd4xMBQAuNe0xmuW2WjoeGMDn1cFO.webp?r=df1"
          alt=""
        />
        <span className="desc">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus culpa inventore voluptatibus officia illo dicta aliquid libero minima eveniet consequatur quis beatae, tenetur cumque optio nulla, obcaecati mollitia veritatis impedit minus corporis corrupti incidunt ea explicabo aperiam. Dignissimos praesentium facere deserunt sed officiis explicabo sit doloribus incidunt, corrupti fugiat enim.
        </span>
        <div className="buttons">
            <button className='play'>
                <PlayArrow/>
                <span>Play</span>
            </button>
            <button className='more'>
                <InfoOutlined/>
                <span>Info</span>
            </button>
        </div>
          </div>
  </div>;
};

export default Featured;

featured.scss

.featured {
  height: 90vh;
  position: relative;

  .category {
    position: absolute;
    top: 80px;
    left: 50px;
    font-size: 30px;
    font-weight: 500;
    color: white;
    display: flex;
    align-items: center;

    select {
      cursor: pointer;
      background-color: var(--main-color);
      border: 1px solid white;
      color: white;
      margin-left: 20px;
      padding: 5px;
    }
  }

  .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .info {
    width: 35%;
    position: absolute;
    left: 50px;
    bottom: 100px;
    color: white;
    display: flex;
    flex-direction: column;

    .img {
      width: 400px;
    }

    .desc {
      margin: 20px 0px;
    }

    .buttons {
      display: flex;

      button {
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 500;
        margin-right: 10px;
        cursor: pointer;

        &.play {
          background-color: white;
          color: var(--main-color);
        }

        &.more {
          background-color: gray;
          color: white;
        }

        span {
          margin-left: 5px;
        }
      }
    }
  }
}

Answer 1

当我将 z-index:1 添加到选择元素 css 时，它解决了问题

 select {
      cursor: pointer;
      z-index: 1;
      background-color: var(--main-color);
      border: 1px solid white;
      color: white;
      margin-left: 20px;
      padding: 5px;
    }

Answer 2

尝试在选择装饰器中的cursor:pointer中使用!important

编辑：您也可以尝试使用id

#genre { 
    cursor:pointer !important ;
   }