Customize input type date
<p>I have an input type date, as the image below:</p>

<p><a href="https://i.stack.imgur.com/AejaC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AejaC.png" alt="enter image description here"></a></p>

<p>I want to remove it the buttons with the up and down only in summer web, used to change each part of the date.</p>

<p>And also display the entire date, because the text is half off because of the place of buttons.</p>

<p>I am providing a editable code to bottom to facilitate.</p>

<pre><code>&lt;input type="date" id="sender_ad_date" name="sender[ad][date]" required="required" class="date" data-role="date" value="31-12-1969"&gt;
</code></pre>

<p><a href="http://codepen.io/MarciusMcflay/pen/QyzVvQ" rel="nofollow noreferrer">Pen edit input type date</a></p>

<p>I know it's a simple question, but not to get to do that. please help me.</p>

<p>I have yet to appear the arrow to open the calendar. Nah actually I have to edit the colors of it as well.</p>

<p><strong>UPDATE</strong> </p>

<p>With a help of miguel I could get something with this code, but there's something on the side of the arrow of the calendar, which this escondedo one piece of text.</p>

<pre><code>.date{
  width: 100px;
}

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

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