【问题标题】:How to change the underline color of the input component in MD Bootstrap如何在 MD Bootstrap 中更改输入组件的下划线颜色
【发布时间】:2020-07-12 03:15:08
【问题描述】:

所以我使用来自MDBootstrap.Input Group Component

我想知道是否有办法改变 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>

我想知道当我们单击它时,是否有办法将输入字段的颜色更改为黑色而不是绿色。谢谢!

【问题讨论】:

    标签: css reactjs frontend web-frontend mdbootstrap


    【解决方案1】:

    你可以改变边框底部:

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

    【讨论】:

      【解决方案2】:

      使用&lt;input /&gt; 设置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"
      />

      实现它的步骤:

      如果您在浏览器中检查样式,

      你会用动画找到那个颜色,复制它并改变那个颜色,就是这样。

      【讨论】:

        猜你喜欢
        • 2018-11-10
        • 1970-01-01
        • 2012-09-15
        • 2018-09-11
        • 1970-01-01
        • 2021-03-10
        • 2018-07-06
        • 1970-01-01
        • 2019-12-14
        相关资源
        最近更新 更多