title: How can I remove the bar in the react-select?
body: <p>I am trying to improve my UI for the react-select.  I did some researches online, but I still cannot figure out how to remove the bar in the select.</p>
  
  <p>Can I style the control component to remove the bar? How？</p>
  
  <pre><code>import React from 'react';
  import chroma from 'chroma-js';
  
  import { colourOptions } from './docs/data';
  import Select from 'react-select';
  
  const dot = (color = '#ccc') =&gt; ({
    alignItems: 'center',
    display: 'flex',
  
    ':before': {
      backgroundColor: color,
      borderRadius: 10,
      content: ' ',
      display: 'block',
      marginRight: 8,
      height: 10,
      width: 10,
    },
  });
  
  const colourStyles = {
    control: styles =&gt; ({ ...styles, backgroundColor: 'white' }),
    option: (styles, { data, isDisabled, isFocused, isSelected }) =&gt; {
      const color = chroma(data.color);
      return {
        ...styles,
        backgroundColor: isDisabled
          ? null
          : isSelected ? data.color : isFocused ? color.alpha(0.1).css() : null,
        color: isDisabled
          ? '#ccc'
          : isSelected
            ? chroma.contrast(color, 'white') &gt; 2 ? 'white' : 'black'
            : data.color,
        cursor: isDisabled ? 'not-allowed' : 'default',
      };
    },
    input: styles =&gt; ({ ...styles, ...dot() }),
    placeholder: styles =&gt; ({ ...styles, ...dot() }),
    singleValue: (styles, { data }) =&gt; ({ ...styles, ...dot(data.color) }),
  };
  
  export default () =&gt; (
    &lt;Select
      defaultValue={colourOptions[2]}
      label="Single select"
      options={colourOptions}
      styles={colourStyles}
    /&gt;
  );
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/qqj3vv9zzj" rel="noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit react-codesandboxer-example"></a></p>