I should mention that I am pretty new to react, and still feeling my way into it. What I'm trying to do here is probably WAY over my head.

I'm trying to integrate react-select with the floating label from react-bootstrap. Since react-select gives you a lot of control over their CSS, that should work fine, and mostly the code works.

However, if I hover over the select, I get a blue border that I can't get rid of: Snip of the select being hovered

The FF developer console reveals that there are in fact two css statements for exactly the same selector:

.css-knmecq-control:hover {
 border-color:#2684FF;
}

.css-knmecq-control:hover {
 border:none!important;
 border-color:red;
}

Try as I may, I have not been able to get rid of the (presumably default) first one. Ironically, even though FF shows the properties second one in the developer console, what it really renders is the first one

developer console screenshot

The problem originated in another project. I was able to reproduce it by creating a new project with npx create-react-app, installing react-select, [email protected] and bootstrap and pasting the relevant sections of the code into the App.js. Everything not explicitly mentioned here was left at the generated defaults.

The dependencies section from my package.json looks like this:

"dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^5.1.1",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.0-beta.6",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "react-select": "^4.3.1",
    "web-vitals": "^1.1.2"
  },

Here's what the component looks like:

import Select from 'react-select';
import {FloatingLabel} from 'react-bootstrap';

const customStyles = {
    control: (styles, state) => {
        return {
            ...styles,
            border: state.menuIsOpen? 'none' : state.isDisabled ? 'none': state.isSelected ? 'none' : state.isFocused ? 'none' : 'none',

            top: '-10px',
            ':hover': { border: 'none !important',borderColor: 'red'}
        }
    }
}

const FloatingLabelSelect = (props) => {
    return (
        <FloatingLabel label={props.label} className={`${props.className} pb-3 `}>
            <Select options={props.options} className={'form-control mb-3'} styles={customStyles}/>
        </FloatingLabel>
    );
};

export default FloatingLabelSelect;

And finally, there's my totally unprepossessing App.js:

import {Container, FloatingLabel, Form} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import FloatingLabelSelect from './components/FloatingLabelSelect';


function App() {
  return (
      <Container>
        <Form>
              <FloatingLabel label={'Other stuff'}>
                <Form.Select as={'select'}>
                  <option disabled selected value>Not selected</option>
                  <option value="1" data-value="M">Male</option>
                  <option value="2" data-value="F">Female</option>
                  <option value="3" data-value="">None</option>
                </Form.Select>
              </FloatingLabel>
              <FloatingLabelSelect label={'Stuff'} options={[{value: 'red', label: 'Red'}, {value: 'blue', label: 'bleu'}]}/>
        </Form>
      </Container>
  );
}

export default App;

Note: Yes, the code snippets show my growing irritation and bear the scars of the sledgehammer. Please forgive me. I wanted you to see it in exactly the state all my unsuccessful attempts to fix it left it in.

CodePudding user response：

(I would write in this in the comment rather than reply but I don't have "reputation")

Is it possible to include a link to the page?

Based on what I'm looking at in the attached screenshots (SS), it may be possible that the "blue border" is not a "css border" property at all but is the result of some other CSS attribute such as "outline" or "box-shadow", which is often standard UX behaviour during a ":focus" event on a select box.

Either way, it looks like the border on the select is not the issue for the select based on your dev tools screenshot but we can triple check by looking at the "computed properties" for the select box to confirm that border is correctly set to none.