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

Question

当光标移动到 select 元素上的流派标签上时。当我试图显示光标指针时，它没有显示一个，也没有显示任何流派选项，当用户单击我想显示流派选项列表的流派时。 select 元素中的其他样式效果很好，但光标指针除外。

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

尝试在select装饰器

中的cursor:pointer中使用!important

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

#genre { 
    cursor:pointer !important ;
   }

Answer 2

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

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

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

The cursor does not appear in the <select> element on scss

javascript

css

sass

reactjs