When the cursor is moved over the genre tag on the select element. While I am trying to show the cursor pointer, it is not showing one and also it is not showing any genre options when the user clicks on the genre i want to show list of genre options. Other styles in select element work well except for the cursor pointer.

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;
        }
      }
    }
  }
}

CodePudding user response：

Try to use !important in cursor:pointer in the select decorator

Edit : You can also try using id

#genre { 
    cursor:pointer !important ;
   }

CodePudding user response：

when i add z-index:1 to the select element css it solves the problem

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