Настройка даты ввода типа

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

Я знаю, что это простой вопрос, но не получить, чтобы сделать это. пожалуйста помогите.

У меня еще не появилась стрелка, чтобы открыть календарь. Нах, на самом деле, я должен отредактировать их цвета.

UPDATE

С помощью Мигеля я мог бы получить что-то с этим кодом, но есть что-то на стороне стрелки календаря, который это escondedo один кусок текста.

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