css - 如何在 MD Bootstrap 中更改输入组件的下划线颜色
问题描述
我想知道是否有办法改变 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>
我想知道当我们单击它时,是否有办法将输入字段的颜色更改为黑色而不是绿色。谢谢!
解决方案
设置backgroundImage样式<input />
会起作用
在文本中尝试:
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"
/>
实现它的步骤:
如果您在浏览器中检查样式,
你会用动画找到那个颜色,复制它并改变那个颜色,就是这样。
推荐阅读
- azure-data-factory - 如何使用 adf 重命名文件,因为它们从 blob 存储复制到数据湖
- javascript - Nextjs 在 getServerSideProps 中接收到意外的字符串化对象查询“[Object object]”
- java - 为什么这个使用多个构造函数的 Java 代码在 VS 代码中运行但不能用 javac 编译?
- c - 内存中的位镜像
- python - 如果字符串和相关的 int 相等,则赋值
- python - 生成文本文件的多个问题
- ios - 从心电图中获取症状
- google-chrome - 刷新窗口后,如何指示浏览器在请求中包含 cookie?
- haskell - 我们如何在 Haskell 中建立明确的类别?
- node.js - React-Native IOS: Background-Timer doesnt run in the Background