[英]How to change the underline color of the input component in MD Bootstrap
So I'm using the Input Group Component from MDBootstrap.所以我正在使用MBootstrap的输入组组件。
I was wondering if there's a way around for changing the color of the blank of the input field component in MD Bootstrap.我想知道是否有办法更改 MD Bootstrap 中输入字段组件的空白颜色。 Like at the moment, it looks like this (without focus):
就像此刻,它看起来像这样(没有焦点):
When I click on this input field, it looks like this (with focus, the color of the input field blank changes to green):当我点击这个输入字段时,它看起来像这样(有焦点,输入字段空白的颜色变为绿色):
The code for the this component is as follows:该组件的代码如下:
<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>
I was wondering if there's a way around for changing the color of the input field blank to black instead of green when we click on it.我想知道是否有办法在我们点击它时将输入字段的颜色更改为黑色而不是绿色。 Thanks!
谢谢!
Set backgroundImage style with <input />
would work使用
<input />
设置backgroundImage样式会起作用
Try it in-text:在文本中尝试:
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" />
The step to achieve it:实现它的步骤:
If you check the style in the browser,如果您在浏览器中检查样式,
You would find that color with animation, copy it and change that color, and that's it.你会用动画找到那个颜色,复制它并改变那个颜色,就是这样。
You can change the border bottom:您可以更改边框底部:
.md-form .form-control#form1 {
border-bottom: 1px solid #f48fb1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.