Как изменить цвет подчеркивания компонента ввода в MD Bootstrap - PullRequest
Новая
       15

Как изменить цвет подчеркивания компонента ввода в MD Bootstrap

2 голосов
/ 31 марта 2020

Поэтому я использую Компонент входной группы из MD Bootstrap.

Мне было интересно, есть ли способ изменить цвет бланк компонента поля ввода в MD Bootstrap. Как и в данный момент, это выглядит так (без фокуса):

Input Field Componentme without focus

Когда я нажимаю на это поле ввода, оно выглядит так (с фокусом цвет поля ввода становится зеленым):

Input Field Component with focus

Код для этого компонента следующий: 

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

Мне было интересно, есть ли способ изменить цвет поля ввода пустым на черный вместо зеленого, когда мы щелкаем по нему. Спасибо!

Ответы [ 2 ]

1 голос
/ 31 марта 2020

Установить 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"
/>

Шаг для достижения этого:

Если вы проверите стиль в браузере,

Вы бы найдите этот цвет с анимацией, скопируйте его и измените этот цвет, и все.

enter image description here

0 голосов
/ 02 апреля 2020

Вы можете изменить нижнюю границу: 

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