title: How to set custom style to antd Select?
body: <p>I want to customise antd <code>Select</code>. When a user click on <code>Select</code> the antd <code>Option</code> should display over antd <code>Select</code> instead of displaying beneath the <code>Select</code></p>
  
  <p>antd <code>Select</code>: <a href="https://ant.design/components/select/" rel="noreferrer">https://ant.design/components/select/</a></p>
  
  <p>Expected behaviour:<img src="https://imgur.com/a/tQPDk0b" alt="I want this"><a href="https://imgur.com/a/tQPDk0b" rel="noreferrer">1</a></p>
  
  <p>Actual behaviour:<img src="https://imgur.com/m43AwxD" alt="I don&#39;t want this"><a href="https://imgur.com/m43AwxD" rel="noreferrer">2</a></p>
  
  <p><strong>JSX</strong></p>
  
  <pre><code>import { FaPlane, FaWater } from "react-icons/fa";
  
  //outside of class
  const shipmentType = {
    sea: [
      { name: "FCL", desc: "FULL CONTAINER LOAD" },
      { name: "LCL", desc: "LESS CONTAINER LOAD" }
    ],
    air: [{ name: "AIR", desc: "AIR DELIVERY" }]
  };
  
  
  //inside of class
  
  render(){
         return(
                &lt;Select
                className="container-dropdown"
                onChange={this.onSelectChange}
                defaultValue={
                    &lt;DisplayContainer data={shipmentType.sea[0]} /&gt;
                }
                key={ shipmentType.sea[0]}
              &gt;
                &lt;Option value={shipmentType.sea[0].name}&gt;
                  &lt;DisplayContainer data={shipmentType.sea[0]} /&gt;
                &lt;/Option&gt;
                &lt;Option value={shipmentType.sea[1].name}&gt;
                  &lt;DisplayContainer data={shipmentType.sea[1]} /&gt;
                &lt;/Option&gt;
              &lt;/Select&gt;
            );
  }
  
  </code></pre>
  
  <p><strong>DisplayContainer.js component</strong></p>
  
  <pre><code>const DisplayContainer = ({ data }) =&gt; {
    return (
      &lt;div
        style={{
          width: "120px",
          height: "45px",
          display: "flex",
          flexFlow: "column",
          justifyContent: "center",
          alignItems: "center"
        }}
      &gt;
        &lt;span
          style={{
            display: "block",
            fontSize: "8px",
            padding: "5px 0px 0px 10px"
          }}
        &gt;
          {data.desc}
        &lt;/span&gt;
  
        &lt;span style={{ padding: "2px 0px 0px 14px" }}&gt;
          {data.name === "AIR" ? &lt;FaPlane /&gt; : &lt;FaWater /&gt;}
          &lt;span
            style={{ display: "inline", marginLeft: "14px", fontSize: "16px" }}
          &gt;
            {data.name}
          &lt;/span&gt;
        &lt;/span&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p><strong>App.css</strong></p>
  
  <pre><code>.container-dropdown {
      height: 53px;
      width: 140px;
      border: 0px solid white;
      border-radius: 0px;
      cursor: pointer;
      font-size: 18px;
      margin: 0px;
      padding: 0px;
  }
  </code></pre>
  
  <p><strong>custom-antd.css</strong></p>
  
  <pre><code>.ant-select-selection.ant-select-selection--single {
      border-radius: 0px 8px 8px 0px;
      height: 53px;
  }
  
  .ant-select-selection-selected-value {
      height: 53px;
      padding: 0px;
      margin: 0px;
  }
  
  .ant-select-selection__rendered {
      padding: 0px;
      margin: 0px;
  }
  
  .ant-select-dropdown-menu.ant-select-dropdown-menu-root.ant-select-dropdown-menu-vertical {
      padding: 0px;
      margin: 0px;
  }
  
  .ant-select-dropdown-menu-item {
      padding: 0px;
      margin: 0px;
  }
  </code></pre>
  
  <p>How can I achieve this? I have already spent hours of time. but I couldn't succeed. I will appreciate you. thank you</p>
  
  <p>Edit 01:</p>
  
  <p><strong>When a user clicks the <code>Select</code> box</strong></p>
  
  <p>I want the top <code>Option</code> (i.e. <code>FCL</code>) goes up and cover the <code>Select</code> box like this:</p>
  
  <p><a href="https://i.stack.imgur.com/mo3SL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mo3SL.png" alt="I want this"></a></p>
  
  <p>I don't want both the <code>Options</code> (i.e. <code>FCL</code> and <code>LCL</code>)to be displayed below <code>Select</code> box:</p>
  
  <p><a href="https://i.stack.imgur.com/gMnxF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gMnxF.png" alt="I don&#39;t want this"></a></p>