CODEWITHSUNDEEP
htmlcss
Michael Kibuku
Michael Kibuku

Reputation: 67

Input date placeholder

I have managed to put the placeholder plus the dd/mm/yyyy together. When I click in order to key in or select the date, the box resets to its default state. Styles like padding, width, and color disappears but when I click outside the box, it returns to default with the styles in place. I would like it to remain the same when selecting the date. Kindly help.

input {
  border: 1px solid #ecf0f1;
  color: #00A79D;
}

input[type=date] {
  text-align: right;
}

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.3em;
  padding: 11px;
}

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
}

input[type="date"]:focus:before {
  content: '' !important;
  color: #00a79d;
}
<div class="col-sm gutters-19">
  <div class="form-group">
    <div class="form-select-custom">
      <input type="date" placeholder="Departure" onchange="this.className=(this.value!=''?'has-value':'')">
    </div>
  </div>
</div>

Upvotes: 0

Views: 2874

Answers (3)

FluffyKitten
FluffyKitten

Reputation: 14312

This style content: '' !important; is causing the problem:

input[type="date"]:focus:before {
  content: '' !important;   /* THIS IS THE PROBLEM */
  color: #00a79d;           /* This is ok */
}

You are removing all the content (i.e. the placeholder word "Departure") and that is what is adding the width and padding.

FYI you are also duplicating the input[type="date"]:before rule, I've combined them into one.

Snippet with that line removed, and you can see it is working:

input {
  border: 1px solid #ecf0f1;
  color: #00A79D;
}

input[type=date] {
  text-align: right;
}

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
  padding: 11px;
}

input[type="date"]:focus:before {
    color: #00a79d;
}
<div class="col-sm gutters-19">
  <div class="form-group">
    <div class="form-select-custom">
      <input type="date" placeholder="Departure" onchange="this.className=(this.value!=''?'has-value':'')">
    </div>
  </div>
</div>

Upvotes: 2

MarvinLeRouge
MarvinLeRouge

Reputation: 534

  1. You shouldn't use ::before on input date elements, since it's heavily browser-specific
  2. Your styles don't disappear : you make your ::before vanish, and it's the thing making the space inside your input. So your input naturally shrinks. Just play with your input[type="date"]:focus::before content, you'll see what i mean.
  3. Not tested, but you could perhaps avoid your javascript toggleClass by using the :empty state. https://developer.mozilla.org/fr/docs/Web/CSS/:empty

Upvotes: 0

Ehsan
Ehsan

Reputation: 819

simply set width and height to input tag

input{
height: 39px;
width: 237px;
}

Upvotes: 0

Related Questions