页面中引入百度地图,实例化后影响html5的表单元素date的上下箭头
复现步骤:
- 使用百度地图的JavaScript的API,引入文件地址"http://api.map.baidu.com/api?key=&v=1.1&services=true"
- 实例化对象
var map = new BMap.Map("mapContainerId"); var point = new BMap.Point(108.93, 34.27); map.centerAndZoom(point, 5); window.map = map;
- 在页面中加入'' 打开页面测试,也可以设置value,格式为:yyyy-mm-dd,
解决办法:
- 由于水平有限暂时没有找到好的解决办法,只能退而求其次去掉这个上下箭头,方法是:
input[type='date']::-webkit-inner-spin-button { display:none; }
- date标签还有其他的配置,如下:
input[type='date']::-webkit-datetime-edit-month-field { color: red; }
```css
input[type='date']::-webkit-datetime-edit-day-field {
color: white;
}
```
```css
input[type='date']::-webkit-datetime-edit-year-field {
color: blue;
}
```
```css
input[type='date']::-webkit-clear-button {
font-size: 18px;
height: 30px;
position: relative;
right: 5px;
margin-right: 4px;
}
```
```css
input[type='date']::-webkit-inner-spin-button {
/*display:none;*/
}
```
```css
input[type='date']::-webkit-calendar-picker-indicator {
font-size: 18px;
}
```
```css
input[type='date']:hover {
background-color: lighten(#2f2f2f,40%);
color: darken(#fff, 10%);
cursor: pointer;
}
```
```css
input[type='date']:active {
color: blue;
}
```