如何在Chrome 27中删除datetime-local HTML输入上的蓝色十字？ [英] How to remove the blue cross on datetime-local HTML input in Chrome 27?

问题描述

我正在使用 datetime-local 输入，但由于Chrome v27显示蓝色交叉，可以清除选择的日期时间。
我不想要它，并回到我们与chrome 26的输入。

这是我如何定义输入：

 < input type =datetime-localvalue =1985-04-12T23：20：50.52/> 
  

看到这个 jsFiddle 。
用Chrome 27打开它可以看到蓝色的交叉路口

你知道如何清除这个蓝色十字架吗？

编辑：

作为临时解决方法，我已经通过重置值来禁用蓝色交叉功能，如果新的已清除（在JSFiddle中查看）

<$ p $（$ input'testInput'）。（'change'，function（event）
{
var newValue = $（'input＃testInput'）。val （）;
if（！newValue || newValue ===）
{
$（'input＃testInput'）。val（lastValue）;
}
else
lastValue = newValue;
}）;

它不太适合初始需求，所以我仍然在寻找一个很好的解决方案。 / p>

解决方案

这是你如何删除十字架和箭头：

  input ::  -  webkit-outer-spin-button，/ *删除箭头* / 
 input ::  -  webkit-inner-spin-button，/ *删除箭头* / 
 input ::  -  webkit-clear-button {/ *删除蓝色十字* / 
 -webkit-appearance：none; 
 margin：0; 
} 
  

I was using the datetime-local input but since Chrome v27 a blue cross appears which allows to clear the choosen datetime. I don't want it and get back to the input we had with chrome 26.

Here is how I define the input:

<input  type="datetime-local" value="1985-04-12T23:20:50.52"/>

See it in this jsFiddle. Open it with Chrome 27 to see the blue cross

Do you know how to remove this blue cross?

Edit :

As a temporary workaround, I've disabled the blue cross functionality by resetting the value if the new one was cleared (see it in JSFiddle )

$('input#testInput').on('change', function(event)
{    
    var newValue = $('input#testInput').val();
    if(!newValue || newValue === "")
    {
        $('input#testInput').val(lastValue);
    }
    else
        lastValue = newValue;
});

It doesn't really fit the initial need so I'm still looking for a good solution.

解决方案

This is how you remove cross and arrows:

input::-webkit-outer-spin-button, /* Removes arrows */
input::-webkit-inner-spin-button, /* Removes arrows */
input::-webkit-clear-button { /* Removes blue cross */
  -webkit-appearance: none;
  margin: 0;
}

这篇关于如何在Chrome 27中删除datetime-local HTML输入上的蓝色十字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！