Question

在带有React和Bootstrap的Safari上使用<select>标签时，即使试图强制使其保持为-webkit-appearance，Safari也会自动将menulist-button的CSS值设置为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

Answer 1

解决方案是双重的：

首先在custom-select标签上使用<select/>类，而不是form-control。修正了上面的示例。
但是由于我的项目使用的是自定义SCSS，所以我需要确保使用Autoprefixer

对于后者，它正在运行以下内容：

npm install autoprefixer postcss postcss-cli
postcss styles.css -u autoprefixer

感谢@Tomas_moose！

使用Bootstrap和React

1 个答案: