react-select-custom.jsx

// index.js
import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
import "./styles.css";

const options = [
  { label: "aaa", value: 1 },
  { label: "bbb", value: 2 },
  { label: "ccc", value: 3 }
];

class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
  }

  render() {
    const { value } = this.state;
    return (
      <div>
        <Select
          options={options}
          value={value}
          placeholder="i am a placeholder"
          onChange={({ value }) => this.setState({ value })}
          searchable={false}
          clearable={false}
          arrowRenderer={({ isOpen }) => {
            return isOpen ? "^" : "v";
          }}
          optionRenderer={({ value: optionValue }, i) => {
            return <span>{label}</span>;
          }}
          className="foo"
        />
        <div>just a foobar</div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

// styles.css
.foo .Select-control {
  position: relative;
  border: 1px solid black;
  height: 40px;
  box-sizing: border-box;
}

.foo.Select.is-focused .Select-control {
  background-color: red;
}

.foo .Select-multi-value-wrapper {
  display: block;
  height: 40px;
  box-sizing: border-box;
}

.foo .Select-arrow-zone {
  position: absolute;
  display: block;
  right: 0;
  width: 25px;
  height: 25px;
  border: 1px solid black;
  box-sizing: border-box;
}

https://codesandbox.io/s/jvkvry5683