Having an issue with my code, I've created a fiddle to demonstrate the problem. You can view it here: http://jsfiddle.net/jmTqk/2/. The blue block blocks the spin button and datepicker dropdown link. It seems to only occur on Windows Chrome. I also created a version without the blue block, which you can access here: http://jsfiddle.net/jmTqk/1/
The HTML code is as follows:
<input id='date1' type="date" />
<div id='abcd'>blue block</div>
And here is the CSS code:
#date1 {
width:6em;
border: 1px solid red;
}
#abcd {
background-color:blue;
height:150px;
width:150px;
display:inline-block;
}
If the input width is changed to 11em, it fits correctly.
On Ubuntu Chrome, the CSS correctly contains the calendar drop down button within the date input field. However, on Windows (XP, 7), it does not. Is there a solution to make the spin button and dropdown button respect the boundaries of the date input on Windows and fit within the red box?