自定义输入类型日期

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

我知道这是一个简单的问题，但不是为了做到这一点。请帮帮我。

我还没有显示箭头来打开日历。实际上我也必须编辑它的颜色。

更新

在米格尔的帮助下，我可以通过这段代码获得一些东西，但是日历箭头侧面有一些东西，这就是一段文字。

.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，是跨浏览器的兼容性

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;