Как переместить кнопку?

Question

[Mag1str]

Использую type="datetime-local". Хочу вместо той кнопки которую дает система использовать свою иконку.
+ из-за этого у меня вышла высота блока больше, что недопустимо. Может есть у кого идеи, буду благодарен.

<div class="form-group">
     <input name="date" id="localdate" type="datetime-local" placeholder="дата">
     <i class="icon icon-Calendar"></i>
</div>

Comments

[Aetae]

Ну ёкарный бабай, что мы делаем когда что-то не того размера, какого нужно? Наверное тюним css? Чем эта "проблема" отличается от любой другой вёрстки которую ты делал? Я в недоумении.

[Mag1str]

Aetae, нет такого в сss. И вся адаптация слетит

[Aetae]

Mag1str, что? 0_о Тыкаешь в инспекторе, смотришь от чего её распирает, правишь паддинги\маргины\высоту. Точно также минусовым маргином\абсолютной позицией перекрываешь стандартную кнопку. Только учти что в разных браузерах - она разная. Где-то и нет её вовсе.
И при чём тут адаптация?

[Mag1str]

Aetae, f0577573.xsph.ru/reservation.html

[Aetae]

Mag1str, правильно было бы обернуть input в блок и обрезать этим блоком лишнее(всякие бордеры соответственно тоже к этому блоку применять).
Так мы всю жизнь и делали.

Но сейчас, благодаря новомодным фичам, можно вырезать дырку прямо в элементе:

input[type="date"] {
  -webkit-mask-image: radial-gradient(circle at right 65px top 50%, rgba(0,0,0,0) 20px, rgba(0,0,0,1) 20px)
}

[stone]

input[type="date"]::-webkit-calendar-picker-indicator, с помощью этого можно задавать стили этой иконки, попробуйте её поместить на место вашей и задать z-index, тогда всё должно работать

[Mag1str]

Aetae, да, иконка которая идет вместе с date исчезла. Вопрос ещё в том как сделать иконку которую я влепил рабочей

[Mag1str]

stone, не удалось сменить цвет

[Aetae]

Mag1str, можешь либо руками клики с неё перенаправлять(самое хардкорное), либо обернуть input с иконкой в label(самое семантичное), либо положить под input с помощью z-index, чтоб клики на самом деле были по нему, либо сделать кнопку прозрачной для кликов, назначив ей pointer-events: none;.
Если нужны всякие hover и прочие эффекты - то наследуй от input:
input[type="date"]:hover + .icon {}

[Mag1str]

Aetae, какой вариант легче всего?)

[Aetae]

Mag1str, label.

[Mag1str]

Aetae, спасибо

[Mag1str]

Aetae, подскажите почему не работает?

<label for="date">
                <input name="date" id="date" type="date" placeholder="дата">
                 <i class="icon icon-Calendar"></i>
                 </label>

[Aetae]

Mag1str, в хроме действительно не открывает выбор, только по нажатию на их кнопку, в фоксе всё норм.
Ну значит возвращаемся к другим предложенным вариантам, щито поделать.

[Mag1str]

Aetae, htmlbook.ru/html/label с тем что должно работать))
может я где-то натупил

[Mag1str]

Aetae, "либо положить под inputс помощью z-index" в каком плане? Не могу понять как должно после этого работать

[Aetae]

Mag1str, он работает: выделяет для ввода первую цифру. Но не открывает меню выбора даты. Вот так вот Хром это видит.

[Aetae]

Mag1str, иконка у тебя position: absolute. Если ей поставить z-index меньше input[date] - они будет "под ним", но поскольку он прозрачный - будет видна.
Клики соответственно будут на сам input.

[Mag1str]

Aetae,

input[type="date"] {
  -webkit-mask-image: radial-gradient(circle at right 65px top 50%, rgba(0,0,0,0) 20px, rgba(0,0,0,1) 20px);
   z-index: 2;
}

input[type="date"]::-webkit-calendar-picker-indicator {
     z-index: 1;
}

так?

[Aetae]

Mag1str, нет, забудь picker-indicator, мы его "вырезали" маской. Твоя иконка - icon-Calendar.

[Mag1str]

Aetae,

input[type="date"] {
  -webkit-mask-image: radial-gradient(circle at right 65px top 50%, rgba(0,0,0,0) 20px, rgba(0,0,0,1) 20px);
   z-index: 2;
}

.icon.icon-Calendar:before {
    z-index: 1;
  content: "\63";
}
}

[Aetae]

Mag1str, в общем так:

input[type="date"], input[type="time"] {
  position: relative;
  z-index: 2
}
input::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 65px;
  height: auto;
  color: transparent;
  background: transparent;
}

Маску можешь выкинуть.

[Mag1str]

Aetae, спасибо, теперь можно нажимать на иконку!