При использовании тега <select> в Safari с React и Bootstrap Safari автоматически устанавливает значение CSS -webkit-appearance в menulist-button даже при попытке заставить его оставаться menulist.
ЭтоПроще поиграть с ним.Вы увидите проблему в Safari, а не в других Chrome или Firefox.
Это ошибка или есть способ удалить все, что «вызывает» это поведение?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"></link>
</head>
<body>
<div id="root"></div>
</body>
</html>
import React from "react";
import { render } from "react-dom";
function App() {
return (
<div className="App">
<div className="container my-3 py-3">
<select name="outside" id="outside" className="form-control">
<option>blue</option>
<option>green</option>
<option>red</option>
<option>yellow</option>
<option>magenta</option>
</select>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
render(<App />, rootElement);
https://codesandbox.io/embed/loving-robinson-8722i