Цвет ввода текста равен цвету заполнителя в приложении реакции - PullRequest
Новая
       10

Цвет ввода текста равен цвету заполнителя в приложении реакции

0 голосов
/ 17 сентября 2018

Почему цвет текста элемента ввода равен цвету заполнителя в Chromium 69.0.3497.81? Пример

Нет правила CSS, определяющего зеленый цвет ввода текста.

В Firefox цвета правильные. 

class MyInput extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      inputInUse: false,
      value: ''
    };
  }
  
  handleChange = (e) => {
    let value = e.target.value;
    this.setState({ 
      inputInUse: value !== '',
      value: value
    });
  }

  handleFocus = (e) => {
    this.setState({ inputInUse: true });
  }

  render() {

    return (
        <input
          type="text"
          className="myInput"
          value={this.state.value}
          placeholder={ this.state.inputInUse ? '' : 'type' }
          onChange={this.handleChange}
          onFocus={this.handleFocus}
        />
    )
  }
}

ReactDOM.render(<MyInput />, document.querySelector('#root'));
.myInput {
	border: 1px solid green;
	padding: 5px 8px;
	border-radius: 4px;
	font-size:22px;
	width: 200px;
}

.myInput::placeholder {
	color: green;
}

.myInput:placeholder-shown {
	color: green;
	font-size:18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Я знаю, что есть лучшие решения.Но поведение браузера мне неясно.

  1. Я использую внешнюю таблицу стилей, чтобы определить цвет заполнителя для элемента ввода
  2. Я отображаю элемент ввода в компоненте React
  3. Атрибут заполнителя вводаосновывается на локальном состоянии этого компонента
...