Cómo cambiar el color de subrayado de la componente de entrada en MD Bootstrap

Anmol Sarraf:

Así que estoy usando el Grupo de entrada de componentes de MDBootstrap.

Me preguntaba si hay alguna forma de evitar para cambiar el color de la pieza inicial del componente campo de entrada en MD Bootstrap. Al igual que en el momento, parece que esto (sin foco):

Cuando hago clic en este campo de entrada, se ve así (con el enfoque, el color del blanco el campo de entrada cambia a verde):

El código para el este componente es el siguiente:

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Name</span>
  </div>
  <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>

Me preguntaba si hay una manera alrededor para cambiar el color del blanco al negro campo de entrada en vez de verde cuando se hace clic en él. ¡Gracias!

keikai:

Conjunto BackgroundImage estilo con <input />trabajo se

Probarlo en el texto:

const style = {
  backgroundImage: `linear-gradient(0deg, black 2px, rgba(0, 150, 136, 0) 0),
    linear-gradient(0deg, rgba(0, 0, 0, 0.26) 1px, transparent 0)`
};
const App = () => {
  return (
    <div className="App">
      <div class="input-group input-group-lg">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-lg">
            Large
          </span>
        </div>
        <input
          type="text"
          class="form-control"
          aria-label="Large"
          style={style}
          aria-describedby="inputGroup-sizing-sm"
        />
      </div>
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css"
  integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX"
  crossorigin="anonymous"
/>

---

El paso para lograrlo:

Si marca el estilo en el navegador,

Se verá que el color con la animación, copiarlo y cambiar ese color, y eso es todo.