Input type="date" как сделать его прозрачным при фокусе

Question

Как сделать input type="date" прозрачным даже при фокусе, т. е. когда выбирается дата из календаря, чтобы текст в инпуте не выделялся и был прозрачным?

Answer 1

Если строго следовать условиям в вопросе, то без минимальной обёртки и строчки на JS не обойтись. Выходит так:

body { background-color: #ff9800; background-image: linear-gradient(45deg, #e6bf00 50%, transparent 50%); background-size: 10px 10px; }

.input_date {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #767676;
}
.input_date::before,
.input_date::after {
  position: absolute;
  top: 0; margin: 0 4px;
  display: flex; height: 100%;
  align-items: center;
}
.input_date::after {
  content: attr(data-date);
  font: 13px monospace;
  letter-spacing: 1px;
  left: 0;
}
.input_date::before {
  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJXaW5kb3dUZXh0IiBkPSJNMjAgM2gtMVYxaC0ydjJIN1YxSDV2Mkg0Yy0xLjEgMC0yIC45LTIgMnYxNmMwIDEuMS45IDIgMiAyaDE2YzEuMSAwIDItLjkgMi0yVjVjMC0xLjEtLjktMi0yLTJ6bTAgMThINFY4aDE2djEzeiIvPjxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L3N2Zz4=);
  right: 0; padding-top: 1px;
}

.input_date>input[type="date"] {
  position: relative; right: 0;
  display: block; height: 100%;
  opacity: 0;
}

Native <input type="date"><br><br>
Custom <label data-date="дд.мм.гггг" class="input_date"><input type="date" oninput="this.parentElement.dataset.date = this.value.replace(/(\d+)-(\d+)-(\d+)/, '$3.$2.$1');"></label>

При этом сам <input> остаётся практически без изменений, а вот обёртку можно кастомизировать и дальше. Так же это не должно влиять на доступ из скриптов и присутствие такого <input> в теге <form>.

БЛОГ НА HUSL

Input type="date" как сделать его прозрачным при фокусе

Ответы (1 шт):