0

I was able to change the placeholder text of my form with CSS (so all the fields would be in this same bluish colour), except for the birthday field (with a calendar popping up), which stays in light grey. I tried to select this particular placeholder but nos success. Is there a way to correct this? Here's my code for this

::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})}/>
    ```
Improve this question

1 Answer 1

Reset to default
1

Not entirely sure whether type="birthday" is even a type, but from what I know you can't change the placeholder color from a input[type="date"].

You could try to use 'hacks' and such in order to change the placeholder its color.

Good reference would be: Is it possible to style the default placeholder text on an HTML5 input type="date" element? in Chrome?

In case the link ever breaks:

<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;
 }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.