如何更改MD Bootstrap中輸入組件的下划線顏色

Question

所以我正在使用MBootstrap的輸入組組件。

我想知道是否有辦法更改 MD Bootstrap 中輸入字段組件的空白顏色。 就像此刻，它看起來像這樣（沒有焦點）：

當我點擊這個輸入字段時，它看起來像這樣（有焦點，輸入字段空白的顏色變為綠色）：

該組件的代碼如下：

<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>

我想知道是否有辦法在我們點擊它時將輸入字段的顏色更改為黑色而不是綠色。 謝謝！

Answer 1

使用<input />設置backgroundImage樣式會起作用

在文本中嘗試：

 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/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous" />

---

實現它的步驟：

如果您在瀏覽器中檢查樣式，

你會用動畫找到那個顏色，復制它並改變那個顏色，就是這樣。

Answer 2

您可以更改邊框底部：

.md-form .form-control#form1 {
  border-bottom: 1px solid #f48fb1;
}