In most modern browsers you can use the showPicker() method of an input[type=date] element to make the widget appear.

So, with that in mind, you could move the <input> outside of a container with overflow:hidden and trigger the widget from a click event on another element.

Something like the snippet below might work, though I wouldn't really suggest using this in a public facing web app due to the limited support :

let cal = document.querySelector('label.calendar');
let ci = document.querySelector('label.calendar input[type=date]');
cal.addEventListener('click', event => ci.showPicker());

label.calendar {
  overflow: hidden;
  user-select: none;
  cursor: pointer;
}

label.calendar input {
  position: absolute;
  bottom: 100%;
  left: 0;
  border: 0;
  padding: 0;
  outline: none;
}

<label class="calendar">
  <input type="date">
  <span>🗓</span>
</label>

Instead, I would recommend you look into other (more mature) options like Smart HTML Calendar which is a Custom HTML Element.

What are you trying to achieve is not possible to do in one solution for every browser because the "date" input type is rendered by the browser and every one of them has their own specification on how to render things. You could try to use a custom component or plugin that renders a calendar using javascript/CSS/HTML that is the only way to have a consistent look and feel across different browsers.