使用 CSS + React + Semantic UI 更改占位符颜色

Question

我可以使用 CSS 更改表单的占位符文本（因此所有字段都将采用相同的蓝色），除了生日字段（弹出日历），它保持浅灰色。我尝试 select 这个特定的占位符但没有成功。有没有办法纠正这个问题？这是我的代码

::placeholder {
    color: #8DA0B3;
    opacity: 1; 
}

input[type="birthday"].date::-webkit-input-placeholder {
  color: #8DA0B3;
}

 <DateInput 
            style={{color: "#8DA0B3"}}
            className="date"
            name = "date"
            placeholder={t('socan.date')} {/*This is for translation*/}
            value={ this.state.date }
            onChange={this.handleChange}
            icon="calendar outline"
          />

          <input type="text" className="address" placeholder={t('socan.adresse')} value={this.state.address} onChange={e => this.setState({address: e.target.value})}/>
          <br></br>
          <input type="text" className="city" placeholder={t('socan.ville')} value={this.state.city} onChange={e => this.setState({city: e.target.value})}/>
          <br></br>
          <Dropdown placeholder={t('socan.province')} search selection options={provinceOptions} onChange={this.handleProvinceChange}/>
          <input type="text" className="postalCode" placeholder={t('socan.codepostal')} value={this.state.postalCode} onChange={e => this.setState({postalCode: e.target.value})}/>
          <br></br>
          <input type="text" className="phone" placeholder={t('socan.telephone')} value={this.state.phone} onChange={e => this.setState({phone: e.target.value})}/>
          <br></br>
          <input type="text" className="email" placeholder={t('socan.courriel')} value={this.state.email} onChange={e => this.setState({email: e.target.value})}/>
          <br></br>
          <input type="text" className="verifyEmail" placeholder={t('socan.confirmation-courriel')} value={this.state.verifyEmail} onChange={e => this.setState({verifyEmail: e.target.value})}/>
          <br></br>
          <input type="text" className="userId" placeholder={t('socan.utilisateur')} value={this.state.userId} onChange={e => this.setState({userId: e.target.value})}/>
          <br></br>
          <input type="password" className="password" placeholder={t('socan.mot-de-passe')} value={this.state.password} onChange={e => this.setState({password: e.target.value})}/>
          <br></br>
          <input type="password" className="verifyPassword" placeholder={t('socan.confirmation-mot-de-passe')} value={this.state.verifyPassword} onChange={e => this.setState({verifyPassword: e.target.value})}/>
    ```

Answer 1

不完全确定 type="birthday" 是否是一种类型，但据我所知，您无法更改 input[type="date"] 的占位符颜色。

您可以尝试使用 'hacks' 等来更改占位符的颜色。

好的参考是：Is it possible to style the default placeholder text on an HTML5 input type="date" element? in Chrome?

万一 link 坏了：

<input type="date">
#document-fragment
<div dir="ltr" pseudo="-webkit-date-and-time-container">
  <div pseudo="-webkit-datetime-edit">
  <span aria-help="Day" aria-valuemax="31" aria-valuemin="1" pseudo="-webkit-datetime-edit-day-field" role="spinbutton">dd</span>
  <div pseudo="-webkit-datetime-edit-text">/</div>
  <span aria-help="Month" aria-valuemax="12" aria-valuemin="1" pseudo="-webkit-datetime-edit-month-field" role="spinbutton">mm</span>
  <div pseudo="-webkit-datetime-edit-text">/</div>
  <span aria-help="Year" aria-valuemax="275760" aria-valuemin="1" pseudo="-webkit-datetime-edit-year-field" role="spinbutton">yyyy</span></div>
  <div></div>
  <div pseudo="-webkit-calendar-picker-indicator"></div>
</div>

::-webkit-datetime-edit-year-field {
   font-weight: bold;
 }

使用 CSS + React + Semantic UI 更改占位符颜色

Change placeholder color with CSS + React + Semantic UI

css

placeholder

reactjs

semantic-ui