自定义输入类型日期

Question

我有一个输入类型日期，如下图：

我想去掉只有夏季网的上下按钮，用来改变日期的各个部分。

并且还显示整个日期，因为按钮的位置使文本减半。

我在底部提供了一个可编辑的代码以方便使用。

<input type="date" id="sender_ad_date" name="sender[ad][date]" required="required" class="date" data-role="date" value="31-12-1969">

Pen edit input type date

我知道这是一个简单的问题，但不要这样做。请帮帮我。

我还没有出现打开日历的箭头。不，实际上我还必须编辑它的颜色。

更新

在 miguel 的帮助下，我可以用这段代码得到一些东西，但是日历箭头的一侧有一些东西，它会显示一段文字。

.date{
  width: 100px;
}

input[type="date"]::-webkit-inner-spin-button {
  display: none;
}

input[type="date"]::-webkit-calendar-picker-indicator{
  background: none;
  padding: 0;
}

Answer 1

通常我会做这样的事情，使用容器来隐藏不需要的部分.. 我会使用它而不是 CSS 的原因是跨浏览器兼容性

.container{
  width: 90px;
  overflow: hidden;
  border: 1px solid black;
}
.date{
  width: 125px;
  border: 0px none transparent;
}

<div class="container">
  <input type="date" id="sender_ad_date" name="sender[ad][date]" required="required" class="date" data-role="date" value="31-12-1969">
</div>

如果你想尝试 CSS，这里有一个链接...http://qnimate.com/guide-to-styling-html5-input-elements/

.date{
  width: 90px;
  paddi
}
.date::-webkit-calendar-picker-indicator,
.date::-webkit-inner-spin-button {
  display: none;
}

<input type="date" id="sender_ad_date" name="sender[ad][date]" required="required" class="date" data-role="date" value="31-12-1969">